Widen right column; lock CodeMirror to in-place horizontal scroll

app.py

@@ -181,22 +181,47 @@ gradio-app > div {
   min-height: 220px !important;
 }
 
-/* Prevent Code / Markdown from pushing the page wider than the container. */
-[class*="gradio-container"] .codemirror-wrapper,
-[class*="gradio-container"] .cm-editor,
-[class*="gradio-container"] .cm-scroller {
-  max-width: 100% !important;
-  overflow-x: auto !important;
-}
-[class*="gradio-container"] .gradio-markdown,
+/* Prevent Code / Markdown / Tabs from pushing the page wider than the container.
+   Every wrapper in the chain is locked to max-width: 100%; only the innermost
+   .cm-scroller scrolls horizontally. */
 [class*="gradio-container"] .gradio-code,
+[class*="gradio-container"] .gradio-markdown,
 [class*="gradio-container"] .prose,
 [class*="gradio-container"] .markdown,
-[class*="gradio-container"] [data-testid="markdown"] {
+[class*="gradio-container"] [data-testid="markdown"],
+[class*="gradio-container"] .tabs,
+[class*="gradio-container"] .tabitem,
+[class*="gradio-container"] .tab-content {
   max-width: 100% !important;
+  width: 100% !important;
+  min-width: 0 !important;
   word-wrap: break-word !important;
   overflow-wrap: anywhere !important;
 }
+[class*="gradio-container"] .codemirror-wrapper {
+  max-width: 100% !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  border-radius: 14px !important;
+  overflow: hidden !important;
+}
+[class*="gradio-container"] .cm-editor {
+  max-width: 100% !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+[class*="gradio-container"] .cm-scroller {
+  max-width: 100% !important;
+  width: 100% !important;
+  overflow-x: auto !important;
+}
+[class*="gradio-container"] .cm-content,
+[class*="gradio-container"] .cm-line {
+  max-width: 100% !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+}
 [class*="gradio-container"] .prose pre,
 [class*="gradio-container"] .markdown pre {
   max-width: 100% !important;
@@ -556,11 +581,6 @@ gradio-app > div {
   color: #0f2744 !important;
   border: none !important;
 }
-[class*="gradio-container"] .codemirror-wrapper,
-[class*="gradio-container"] .cm-editor {
-  border-radius: 14px !important;
-  overflow: hidden !important;
-}
 [class*="gradio-container"] .cm-gutters {
   border-right: 1px solid #dbeafe !important;
   color: #6b86a6 !important;
@@ -921,7 +941,7 @@ with gr.Blocks(
     fill_width=True,
 ) as demo:
     with gr.Row(elem_classes="layout-gap"):
-        with gr.Column(scale=7):
+        with gr.Column(scale=6, min_width=420):
             with gr.Group(elem_classes="section-card"):
                 gr.HTML('<div class="section-heading">Chat</div>')
                 question = gr.Textbox(
@@ -948,7 +968,7 @@ with gr.Blocks(
                     with gr.TabItem("Record"):
                         trace = gr.Code(label="Execution Trace (JSON)", language="json")
 
-        with gr.Column(scale=3, elem_classes="right-stack"):
+        with gr.Column(scale=4, min_width=360, elem_classes="right-stack"):
             with gr.Group(elem_classes=["section-card", "no-frame"]):
                 gr.Image(
                     value=LOGO_PATH,