Update app.py

app.py

@@ -103,18 +103,20 @@ def predict(user_input, history, access_granted):
     return history, ""
 
 with gr.Blocks(theme, css="""
-    #chatbot { height: calc(100% - 100px) !important; overflow-y: auto; }
-    .gradio-container { height: 100vh; max-width: 100% !important; padding: 0 !important; }
+    #chatbot { flex-grow: 1; height: 460px; overflow-y: auto; }
+    .gradio-container { height: 680px; max-width: 100% !important; padding: 0 !important; }
     #component-0 { height: 100%; }
+    #component-3 { height: calc(100% - 250px); }
     footer { display: none !important; }
-    .message-wrap { overflow-y: auto !important; max-height: none !important; }
-    .chat-wrap { max-height: none !important; }
-    .scroll-hide { max-height: 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; }
     @media (max-width: 600px) {
         #code_submit {
             height: 60px !important;
@@ -129,20 +131,20 @@ with gr.Blocks(theme, css="""
     access_granted = gr.State(False)
 
     with gr.Tab("Access"):
-        gr.Markdown("Enter the Access Code displayed in the upper-left corner.")
-        code_input = gr.Textbox(label="Access Code", type="text", placeholder="Enter CODE here...")
-        code_submit = gr.Button("Submit Code", elem_id="code_submit")
-        code_message = gr.Label(label="Status", elem_id="code_message")
+        with gr.Tab("Access"):
+            gr.Markdown("Enter the Access Code displayed in the upper-left corner.")
+            code_input = gr.Textbox(label="Access Code", type="text", placeholder="Enter CODE here...")
+            code_submit = gr.Button("Submit Code", elem_id="code_submit")
+            code_message = gr.Label(label="Status", elem_id="code_message")
 
     with gr.Tab("Chat"):
-        chatbot = gr.Chatbot(label="Conversation", elem_id="chatbot", height=340)
-        with gr.Row():
-            msg = gr.Textbox(
-                label=f"Chat with {coach_name_short}", 
-                placeholder="Type your message here... (MAX: 1000 characters)",
-                interactive=False
-            )
-            submit = gr.Button("Submit", interactive=False, scale=0.15)
+        chatbot = gr.Chatbot(label="Conversation", height=340)  # Adjust the height as needed
+        msg = gr.Textbox(
+            label=f"Chat with {coach_name_short}", 
+            placeholder="Type your message here... (MAX: 1000 characters)",
+            interactive=False
+        )
+        submit = gr.Button("Submit Message", interactive=False)
 
     def submit_code(code, access_granted):
         success, _, _, message = verify_code(code, access_granted)