TODO: fix the double scrollbar

assets/app.css

@@ -1,141 +1,197 @@
-.borderless-main-workspace {
-  align-items: stretch;
-  gap: 12px;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.borderless-center-panel,
-.borderless-chat-panel {
-  min-height: 70vh;
-}
-
-.borderless-center-panel {
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
-}
-
-.borderless-chat-panel {
-  border-left: 1px solid rgba(148, 163, 184, 0.18);
-  padding-left: 10px;
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-}
-
-.borderless-tabs {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-  overflow: hidden;
-}
-
-.borderless-tabs > .tab-wrapper {
-  flex-shrink: 0;
-}
-
-.borderless-tabs .tabitem {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.borderless-tabs .tabitem.borderless-form-tab {
-  overflow-y: auto;
-  overflow-x: hidden;
-  overscroll-behavior: contain;
-}
-
-.borderless-tabs .tabitem.borderless-chat-tab {
-  overflow: hidden;
-}
-
-.borderless-tabs .tabitem.borderless-chat-tab > .column {
-  flex: 1 1 auto;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.borderless-chat-panel > :where(.gap, .block, .form, div) {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  gap: 8px;
-}
-
-.borderless-form-panel {
-  gap: 8px;
-}
-
-.borderless-form-panel textarea {
-  overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.borderless-form-panel textarea::-webkit-scrollbar {
-  display: none;
-}
-
-.borderless-form-hint {
-  color: #9ca3af;
-  font-size: 0.9rem;
-}
-
-.borderless-chat-panel .borderless-chat-input textarea {
-  min-height: 6rem;
-  resize: none;
-}
-
-.borderless-chat-panel textarea::-webkit-scrollbar {
-  display: none;
-}
-
-.borderless-chat-panel .borderless-chatbot,
-.borderless-chat-panel .chatbot {
-  flex: 1 1 auto;
-  min-height: 52vh;
-}
-
-.borderless-chat-panel .chatbot-wrap,
-.borderless-chat-panel .bubble-wrap {
-  flex: 1 1 auto;
-  min-height: 52vh;
-}
-
-.borderless-hero h2 {
-  margin-bottom: 0.25rem;
-}
-
-.borderless-hero p {
-  max-width: 820px;
-  color: #9ca3af;
-}
-
-.borderless-examples-title {
-  margin-top: 0.35rem;
-  font-weight: 600;
-}
-
-.globe-column {
-  min-height: 70vh;
-}
-
-@media (max-width: 900px) {
-  .borderless-chat-panel {
-    border-left: 0;
-    height: auto;
-    min-height: 70vh;
-    padding-left: 0;
-  }
-}
-
-footer {
-  opacity: 0.72;
-}
+.borderless-main-workspace {
+  align-items: stretch;
+  gap: 12px;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.borderless-center-panel,
+.borderless-chat-panel {
+  min-height: 70vh;
+}
+
+.borderless-center-panel {
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.borderless-chat-panel {
+  border-left: 1px solid rgba(148, 163, 184, 0.18);
+  padding-left: 10px;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  overflow: hidden;
+}
+
+.borderless-tabs {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.borderless-tabs > .tab-wrapper {
+  flex-shrink: 0;
+}
+
+.borderless-tabs .tabitem {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.borderless-tabs .tabitem.borderless-form-tab {
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.borderless-tabs .tabitem.borderless-chat-tab {
+  overflow: hidden;
+}
+
+.borderless-tabs .tabitem.borderless-chat-tab > .column {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: transparent;
+}
+
+.borderless-chat-panel > :where(.gap, .block, .form, div) {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.borderless-form-panel {
+  gap: 8px;
+}
+
+.borderless-form-panel textarea {
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.borderless-form-panel textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.borderless-form-hint {
+  color: #9ca3af;
+  font-size: 0.9rem;
+}
+
+.borderless-chat-panel .borderless-chat-input textarea {
+  min-height: 4rem;
+  resize: none;
+  background: transparent;
+}
+
+.borderless-chat-panel .borderless-chat-input,
+.borderless-chat-panel .borderless-chat-input :where(.wrap, .input-container) {
+  flex: 0 0 auto;
+  background: transparent !important;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.borderless-chat-panel textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.borderless-chat-panel .borderless-chatbot,
+.borderless-chat-panel .chatbot {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent !important;
+}
+
+.borderless-chat-panel .chatbot-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  background: transparent !important;
+}
+
+.borderless-chat-panel .borderless-chat-input::-webkit-scrollbar,
+.borderless-chat-panel .chatbot-wrap::-webkit-scrollbar {
+  display: none;
+}
+
+.borderless-chat-panel .bubble-wrap {
+  flex: 0 0 auto;
+  min-height: auto;
+  margin-block: 0.35rem;
+}
+
+.borderless-chat-panel :where(
+  .bubble,
+  .message,
+  .message-wrap,
+  .message-content,
+  .md,
+  .prose
+) {
+  max-height: none !important;
+  overflow-y: visible !important;
+  scrollbar-width: none;
+}
+
+.borderless-chat-panel :where(
+  .bubble,
+  .message,
+  .message-wrap,
+  .message-content,
+  .md,
+  .prose
+)::-webkit-scrollbar {
+  display: none;
+}
+
+.borderless-hero h2 {
+  margin-bottom: 0.25rem;
+}
+
+.borderless-hero p {
+  max-width: 820px;
+  color: #9ca3af;
+}
+
+.borderless-examples-title {
+  margin-top: 0.35rem;
+  font-weight: 600;
+}
+
+.globe-column {
+  min-height: 70vh;
+}
+
+@media (max-width: 900px) {
+  .borderless-chat-panel {
+    border-left: 0;
+    height: auto;
+    min-height: 70vh;
+    padding-left: 0;
+  }
+}
+
+footer {
+  opacity: 0.72;
+}

ui/workspace.py

@@ -1,84 +1,83 @@
-# ui/workspace.py
-import gradio as gr
-
-from ui.agent import respond
-from ui.agent.system_prompt import BORDERLESS_SYSTEM_PROMPT
-from ui.chat.defaults import DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE, DEFAULT_TOP_P
-from ui.chat.panel import SidebarChatInterface
-from ui.globe import render_globe_panel
-from ui.globe_commands import empty_globe_state
-from ui.intake import render_intake_panel
-
-
-def create_main_workspace(
-    history_container: gr.Column | None = None,
-) -> gr.ChatInterface:
-    """
-    Compose the main workspace: globe panel, intake form tab, and chat tab.
-    """
-    globe_state = gr.JSON(value=empty_globe_state(), visible=False, elem_id="globe-state")
-    chat_input = gr.MultimodalTextbox(
-        show_label=False,
-        placeholder="Create a prompt from the form, choose a demo, or type directly...",
-        file_count="multiple",
-        sources=["upload"],
-        lines=3,
-        max_lines=12,
-        elem_classes=["borderless-chat-input"],
-        render=False,
-    )
-
-    with gr.Row(elem_classes=["borderless-main-workspace"], equal_height=True):
-        with gr.Column(
-            scale=7,
-            min_width=520,
-            elem_classes=["borderless-center-panel"],
-        ):
-            gr.Markdown(
-                "## Borderless\n"
-                "Describe your background once. The agent researches official sources, compares realistic pathways, and suggests countries to migrate to.",
-                elem_classes=["borderless-hero"],
-            )
-            globe_column = gr.Column(elem_classes=["globe-column"])
-            with globe_column:
-                render_globe_panel(height="70vh")
-
-        with gr.Column(
-            scale=4,
-            min_width=360,
-            elem_classes=["borderless-chat-panel"],
-        ):
-            with gr.Tabs(elem_classes=["borderless-tabs"]) as workspace_tabs:
-                with gr.Tab("Form", elem_classes=["borderless-form-tab"]):
-                    render_intake_panel(chat_input, workspace_tabs)
-                with gr.Tab("Chat", id="chat", elem_classes=["borderless-chat-tab"]):
-                    chat = SidebarChatInterface(
-                        respond,
-                        multimodal=True,
-                        chatbot=gr.Chatbot(
-                            height="52vh",
-                            show_label=False,
-                            container=False,
-                            elem_classes=["borderless-chatbot"],
-                        ),
-                        textbox=chat_input,
-                        history_container=history_container,
-                        fill_height=True,
-                        additional_inputs=[
-                            gr.State(BORDERLESS_SYSTEM_PROMPT),
-                            gr.State(DEFAULT_MAX_TOKENS),
-                            gr.State(DEFAULT_TEMPERATURE),
-                            gr.State(DEFAULT_TOP_P),
-                            globe_state,
-                        ],
-                        additional_outputs=[globe_state],
-                    )
-
-    globe_state.change(
-        fn=None,
-        inputs=[globe_state],
-        outputs=[],
-        js="(state) => { window.BorderlessGlobe?.applyState(state); return []; }",
-        queue=False,
-    )
-    return chat
+# ui/workspace.py
+import gradio as gr
+
+from ui.agent import respond
+from ui.agent.system_prompt import BORDERLESS_SYSTEM_PROMPT
+from ui.chat.defaults import DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE, DEFAULT_TOP_P
+from ui.chat.panel import SidebarChatInterface
+from ui.globe import render_globe_panel
+from ui.globe_commands import empty_globe_state
+from ui.intake import render_intake_panel
+
+
+def create_main_workspace(
+    history_container: gr.Column | None = None,
+) -> gr.ChatInterface:
+    """
+    Compose the main workspace: globe panel, intake form tab, and chat tab.
+    """
+    globe_state = gr.JSON(value=empty_globe_state(), visible=False, elem_id="globe-state")
+    chat_input = gr.MultimodalTextbox(
+        show_label=False,
+        placeholder="Create a prompt from the form, choose a demo, or type directly...",
+        file_count="multiple",
+        sources=["upload"],
+        lines=3,
+        max_lines=12,
+        elem_classes=["borderless-chat-input"],
+        render=False,
+    )
+
+    with gr.Row(elem_classes=["borderless-main-workspace"], equal_height=True):
+        with gr.Column(
+            scale=7,
+            min_width=520,
+            elem_classes=["borderless-center-panel"],
+        ):
+            gr.Markdown(
+                "## Borderless\n"
+                "Describe your background once. The agent researches official sources, compares realistic pathways, and suggests countries to migrate to.",
+                elem_classes=["borderless-hero"],
+            )
+            globe_column = gr.Column(elem_classes=["globe-column"])
+            with globe_column:
+                render_globe_panel(height="70vh")
+
+        with gr.Column(
+            scale=4,
+            min_width=360,
+            elem_classes=["borderless-chat-panel"],
+        ):
+            with gr.Tabs(elem_classes=["borderless-tabs"]) as workspace_tabs:
+                with gr.Tab("Form", elem_classes=["borderless-form-tab"]):
+                    render_intake_panel(chat_input, workspace_tabs)
+                with gr.Tab("Chat", id="chat", elem_classes=["borderless-chat-tab"]):
+                    chat = SidebarChatInterface(
+                        respond,
+                        multimodal=True,
+                        chatbot=gr.Chatbot(
+                            show_label=False,
+                            container=False,
+                            elem_classes=["borderless-chatbot"],
+                        ),
+                        textbox=chat_input,
+                        history_container=history_container,
+                        fill_height=True,
+                        additional_inputs=[
+                            gr.State(BORDERLESS_SYSTEM_PROMPT),
+                            gr.State(DEFAULT_MAX_TOKENS),
+                            gr.State(DEFAULT_TEMPERATURE),
+                            gr.State(DEFAULT_TOP_P),
+                            globe_state,
+                        ],
+                        additional_outputs=[globe_state],
+                    )
+
+    globe_state.change(
+        fn=None,
+        inputs=[globe_state],
+        outputs=[],
+        js="(state) => { window.BorderlessGlobe?.applyState(state); return []; }",
+        queue=False,
+    )
+    return chat