Repository: All-Hands-AI/OpenHands
Pull request: fix(frontend): Fix Jupyter tab overflow
**End-user friendly description of the problem this fixes or functionality that this introduces**
If there was a really long and single line input/output, it would stretch the container all the way and overflow!

- [ ] Include this change in the Release Notes. If checked, you must provide an **end-user friendly** description for your change below

---
**Give a summary of what the PR does, explaining any non-trivial design decisions**
- Introduce a hacky way to fix Jupyter to the parent width

There is actually a style mess with the containers and a few other hacky solutions have already been introduced (fix width of chat box, grow editor, and now fix juyter). This area should be revised soon BUT need careful consideration since we do want to implement resizable containers and is why I've not come to it yet.

Hopefully this week or next week I will introduce resizable containers and introduce proper containers

<img width="1207" alt="Screenshot 2024-11-07 at 15 30 09" src="https://github.com/user-attachments/assets/9cb0209f-ceb0-4cac-9587-7eae3d8b8ad3">

---
**Link of any specific issues this addresses**
Resolves #4714

---

To run this PR locally, use the following command:
```
docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:d345a98-nikolaik   --name openhands-app-d345a98   docker.all-hands.dev/all-hands-ai/openhands:d345a98
```

Problem statement:
[Bug]: if Jupyter Shell output has a long single line output, the UI container grows too wide and goes offscreen
### Is there an existing issue for the same bug?

- [X] I have checked the existing issues.

### Describe the bug and reproduction steps

To repro:
- Make the agent run a python script in the jupyter shell that outputs a really long line
- Hint, maybe have a raw file with a single extra  wide line and just ask the agent to read the file
- In the UI, switch to the Jupyter tab, notice the UI will grow extra wide and potentially go off screen

Switching between the workspace and the Jupyter tab will also somehow make the outer container of the right hand side of the UI grow wider and squeeze the left side conversation box narrower.

I think the fix should be along the lines of adding `wrapLongLines={true}` to the `Syntaxhighlighter` in the `Jupyter.tsx` file.
However, even after adding that, the width of the jupyter container will still grow wider when switching between the workspace tab and the jupyter tab.

### OpenHands Installation

Docker command in README

### OpenHands Version

_No response_

### Operating System

None

### Logs, Errors, Screenshots, and Additional Context

_No response_

Hints from issue discussion:
Yep we've definitely seen the Jupyter tab act weird. Thanks for opening this issue!

Commit message: Fix jupyter overflow

Patch to review:
diff --git a/frontend/src/components/Jupyter.tsx b/frontend/src/components/Jupyter.tsx
index 26e33a77de18..23eafde69101 100644
--- a/frontend/src/components/Jupyter.tsx
+++ b/frontend/src/components/Jupyter.tsx
@@ -25,7 +25,11 @@ function JupyterCell({ cell }: IJupyterCell): JSX.Element {
           className="scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 overflow-auto px-5"
           style={{ padding: 0, marginBottom: 0, fontSize: "0.75rem" }}
         >
-          <SyntaxHighlighter language="python" style={atomOneDark}>
+          <SyntaxHighlighter
+            language="python"
+            style={atomOneDark}
+            wrapLongLines
+          >
             {code}
           </SyntaxHighlighter>
         </pre>
@@ -78,7 +82,11 @@ function JupyterCell({ cell }: IJupyterCell): JSX.Element {
   );
 }
 
-function JupyterEditor(): JSX.Element {
+interface JupyterEditorProps {
+  maxWidth: number;
+}
+
+function JupyterEditor({ maxWidth }: JupyterEditorProps) {
   const { t } = useTranslation();
 
   const { cells } = useSelector((state: RootState) => state.jupyter);
@@ -88,9 +96,9 @@ function JupyterEditor(): JSX.Element {
     useScrollToBottom(jupyterRef);
 
   return (
-    <div className="flex-1">
+    <div className="flex-1 h-full w-full" style={{ maxWidth }}>
       <div
-        className="overflow-y-auto h-full"
+        className="overflow-auto h-full"
         ref={jupyterRef}
         onScroll={(e) => onChatBodyScroll(e.currentTarget)}
       >
diff --git a/frontend/src/routes/_oh.app.jupyter.tsx b/frontend/src/routes/_oh.app.jupyter.tsx
index ae836337570c..6a7dac250f32 100644
--- a/frontend/src/routes/_oh.app.jupyter.tsx
+++ b/frontend/src/routes/_oh.app.jupyter.tsx
@@ -1,7 +1,23 @@
+import React from "react";
 import JupyterEditor from "#/components/Jupyter";
 
 function Jupyter() {
-  return <JupyterEditor />;
+  const parentRef = React.useRef<HTMLDivElement>(null);
+  const [parentWidth, setParentWidth] = React.useState(0);
+
+  // This is a hack to prevent the editor from overflowing
+  // Should be removed after revising the parent and containers
+  React.useEffect(() => {
+    if (parentRef.current) {
+      setParentWidth(parentRef.current.offsetWidth);
+    }
+  }, []);
+
+  return (
+    <div ref={parentRef}>
+      <JupyterEditor maxWidth={parentWidth} />
+    </div>
+  );
 }
 
 export default Jupyter;


Code review comments:
diff_hunk: @@ -88,9 +96,9 @@ function JupyterEditor(): JSX.Element {
     useScrollToBottom(jupyterRef);
 
   return (
-    <div className="flex-1">
+    <div className="flex-1 h-full w-full" style={{ maxWidth }}>
       <div
-        className="overflow-y-auto h-full"
+        className="overflow-auto h-full"
path: frontend/src/components/Jupyter.tsx
text: @author:
```suggestion
        className="overflow-y-auto h-full"
```