Update app.py

app.py

@@ -231,29 +231,26 @@ def left_navbar_static():
     ], style={"padding": "1rem", "backgroundColor": "#f8f9fa", "height": "100vh", "overflowY": "auto"})
 
 def chat_box_card():
-    # Only the chat-window div should be scrollable
+    # Explicit scrollbars and height
     return dbc.Card(
         dbc.CardBody([
-            html.Div(
-                id="chat-window",
-                style={
-                    "height": "60vh",
-                    "overflowY": "auto",
-                    "overflowX": "auto",
-                    "display": "flex",
-                    "flexDirection": "column",
-                    "justifyContent": "flex-end",
-                    "backgroundColor": "#fff",
-                    "padding": "0.5rem",
-                    "borderRadius": "0.5rem"
-                }
-            )
+            html.Div(id="chat-window", style={
+                "height": "60vh",
+                "overflowY": "scroll",
+                "overflowX": "auto",
+                "display": "flex",
+                "flexDirection": "column",
+                "justifyContent": "flex-end",
+                "backgroundColor": "#fff",
+                "padding": "0.5rem",
+                "borderRadius": "0.5rem"
+            })
         ]),
         className="mt-3",
         style={
             "height": "62vh",
-            "display": "flex",
-            "flexDirection": "column"
+            "overflowY": "scroll",
+            "overflowX": "auto"
         }
     )
 
@@ -283,20 +280,13 @@ def user_input_card():
     )
 
 def right_main_static():
-    # The chat message area gets its own container/card with its own scrollbar
     return html.Div([
-        html.Div(
-            chat_box_card(),
-            style={"width": "100%"}
-        ),
-        html.Div(
-            user_input_card(),
-            style={"width": "100%", "marginTop": "1.5rem"}
-        ),
+        chat_box_card(),
+        user_input_card(),
         dcc.Loading(id="loading", type="default", fullscreen=False, style={"position": "absolute", "top": "5%", "left": "50%"}),
         dcc.Interval(id="stream-interval", interval=400, n_intervals=0, disabled=True, max_intervals=1000),
         dcc.Store(id="client-question", data="")
-    ], style={"padding": "1rem", "backgroundColor": "#fff", "height": "100vh", "overflowY": "auto", "display": "flex", "flexDirection": "column", "justifyContent": "flex-start"})
+    ], style={"padding": "1rem", "backgroundColor": "#fff", "height": "100vh", "overflowY": "auto"})
 
 app.layout = html.Div([
     dcc.Store(id="session-id", storage_type="local"),