Update app.py via AI Editor

app.py

@@ -231,7 +231,7 @@ def left_navbar_static():
     ], style={"padding": "1rem", "backgroundColor": "#f8f9fa", "height": "100vh", "overflowY": "auto"})
 
 def chat_box_card():
-    # Make only the chat-window scrollable, always show vertical scrollbar
+    # Only the chat-window div should be scrollable
     return dbc.Card(
         dbc.CardBody([
             html.Div(
@@ -251,7 +251,9 @@ def chat_box_card():
         ]),
         className="mt-3",
         style={
-            "height": "62vh"
+            "height": "62vh",
+            "display": "flex",
+            "flexDirection": "column"
         }
     )
 
@@ -281,13 +283,20 @@ def user_input_card():
     )
 
 def right_main_static():
+    # The chat message area gets its own container/card with its own scrollbar
     return html.Div([
-        chat_box_card(),
-        user_input_card(),
+        html.Div(
+            chat_box_card(),
+            style={"width": "100%"}
+        ),
+        html.Div(
+            user_input_card(),
+            style={"width": "100%", "marginTop": "1.5rem"}
+        ),
         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"})
+    ], style={"padding": "1rem", "backgroundColor": "#fff", "height": "100vh", "overflowY": "auto", "display": "flex", "flexDirection": "column", "justifyContent": "flex-start"})
 
 app.layout = html.Div([
     dcc.Store(id="session-id", storage_type="local"),