fix(frontend): Jupyter tab requires page refresh to display content (#9614)

frontend/src/routes/jupyter-tab.tsx

@@ -7,15 +7,36 @@ function Jupyter() {
 
   // This is a hack to prevent the editor from overflowing
   // Should be removed after revising the parent and containers
+  // Use ResizeObserver to properly track parent width changes
   React.useEffect(() => {
+    let resizeObserver: ResizeObserver | null = null;
+
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // Use contentRect.width for more accurate measurements
+        const { width } = entry.contentRect;
+        if (width > 0) {
+          setParentWidth(width);
+        }
+      }
+    });
+
     if (parentRef.current) {
-      setParentWidth(parentRef.current.offsetWidth);
+      resizeObserver.observe(parentRef.current);
     }
+
+    return () => {
+      resizeObserver?.disconnect();
+    };
   }, []);
 
+  // Provide a fallback width to prevent the editor from being hidden
+  // Use parentWidth if available, otherwise use a large default
+  const maxWidth = parentWidth > 0 ? parentWidth : 9999;
+
   return (
     <div ref={parentRef} className="h-full">
-      <JupyterEditor maxWidth={parentWidth} />
+      <JupyterEditor maxWidth={maxWidth} />
     </div>
   );
 }