Update app.py

app.py

@@ -475,6 +475,49 @@ SLEEK_CSS = """
     border: 1px solid #2a3755 !important;
     border-radius: 8px !important;
 }
+/* ── GRADIO CHATBOT SCROLL FIX (2025) ── */
+/* Adaptive height: Scales to 80% of viewport, min 500px for small screens */
+#chatbot_root {
+    height: calc(80vh - 50px) !important;  /* Fills most of right panel, minus header/margins */
+    min-height: 500px !important;
+    max-height: 90vh !important;
+    overflow-y: auto !important;  /* FORCE SCROLLBAR WHEN NEEDED */
+    overflow-x: hidden !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #3a4a6e #16203b !important;
+}
+
+/* Target inner messages container (Gradio's scrollable area) */
+#chatbot_root .messages,
+#chatbot_root [role="log"] {  /* Fallback for type="messages" */
+    height: 100% !important;
+    overflow-y: auto !important;
+    padding: 20px !important;
+}
+
+/* WebKit scrollbar (Chrome/Edge/Safari) */
+#chatbot_root::-webkit-scrollbar,
+#chatbot_root .messages::-webkit-scrollbar {
+    width: 8px !important;
+}
+#chatbot_root::-webkit-scrollbar-track {
+    background: #16203b !important;
+}
+#chatbot_root::-webkit-scrollbar-thumb {
+    background: #3a4a6e !important;
+    border-radius: 4px !important;
+}
+#chatbot_root::-webkit-scrollbar-thumb:hover {
+    background: rgba(100, 120, 160, 0.7) !important;
+}
+
+/* Ensure long markdown/tables don't break layout */
+#chatbot_root pre, #chatbot_root table {
+    overflow-x: auto !important;
+    background: #0f1629 !important;
+    border: 1px solid #2a3755 !important;
+    border-radius: 8px !important;
+}
 """
 
 VOICE_STT_HTML = """
@@ -572,9 +615,11 @@ with gr.Blocks(theme=gr.themes.Soft(), css=SLEEK_CSS, fill_width=True) as demo:
                        chat_history_output = gr.Chatbot(
                             label="Analysis Output", 
                             type="messages",
-                            height="800",  # ← This removes the 400px cap and lets it fill the parent
+                            height="600",  # ← This removes the 400px cap and lets it fill the parent
                             container=False,
                             autoscroll=True,
+                            elem_id="chatbot_root",  # For CSS targeting
+                            resizable=True,
                         )
                 with gr.TabItem("Assessment History", id=1, elem_classes=["tabitem"]):
                     gr.Markdown("### Review Past Assessments")