Update app.py

app.py

@@ -103,22 +103,18 @@ def predict(user_input, history, access_granted):
     return history, ""
 
 with gr.Blocks(theme, css="""
-    #chatbot { flex-grow: 1; height: 460px; overflow-y: auto; }
+    #chatbot { flex-grow: 1; height: 340px; overflow-y: auto; }
     .gradio-container { height: 680px; max-width: 100% !important; padding: 0 !important; }
-    #component-0 { height: 100%; }
-    #component-3 { height: calc(100% - 250px); }
+    #component-0 { height: 95%; }
+    #component-3 { height: calc(95% - 250px); }
     footer { display: none !important; }
     #submit-btn { margin-top: 10px; }
     #code_submit {
         height: 50px !important;
         font-size: 1.2em !important;
     }
-
-    /* Add these new rules here */
-    .message-wrap { max-height: 300px !important; overflow-y: auto !important; }
-    .chat-wrap { max-height: 400px !important; overflow-y: auto !important; }
-    .gradio-container { height: auto !important; min-height: 0 !important; }
-
+    .message-wrap { max-height: none !important; overflow-y: auto !important; }
+    .chat-wrap { max-height: none !important; overflow-y: auto !important; }
     @media (max-width: 600px) {
         #code_submit {
             height: 60px !important;
@@ -140,7 +136,7 @@ with gr.Blocks(theme, css="""
             code_message = gr.Label(label="Status", elem_id="code_message")
 
     with gr.Tab("Chat"):
-        chatbot = gr.Chatbot(label="Conversation", height=340)  # Adjust the height as needed
+        chatbot = gr.Chatbot(label="Conversation", elem_id="chatbot", height=340)
         msg = gr.Textbox(
             label=f"Chat with {coach_name_short}", 
             placeholder="Type your message here... (MAX: 1000 characters)",