Update app.py

app.py

@@ -102,30 +102,56 @@ def predict(user_input, history, access_granted):
     history.append((user_input, message_content))
     return history, ""
 
-css = """
-#Chatbot { 
-    max-height: 200px;  /* Adjust this value as needed */
-    overflow-y: auto;
-}
-footer {
-    display: none !important;
-}
-"""
-
-with gr.Blocks(theme, css=css) as demo:
+with gr.Blocks(theme, css="""
+    #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; }
+    #submit-btn { margin-top: 10px; }
+    #code_submit {
+        height: 50px !important;
+        font-size: 1.2em !important;
+    }
+    #code_message { 
+        font-size: 1.4em !important; 
+        font-weight: bold !important; 
+        padding: 15px !important; 
+        margin-top: 15px !important;
+        border-radius: 5px !important;
+        text-align: center !important;
+    }
+    #code_message.error { color: #d32f2f !important; background-color: #ffcdd2 !important; }
+    #code_message.success { color: #388e3c !important; background-color: #c8e6c9 !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;
+            font-size: 1.3em !important;
+        }
+        #code_message {
+            font-size: 1.2em !important;
+            padding: 10px !important;
+        }
+    }
+""") as demo:
     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")
-        code_message = gr.Markdown()
+        code_submit = gr.Button("Submit Code", elem_id="code_submit")
+        code_message = gr.Markdown(elem_id="code_message")
 
     with gr.Tab("Chat"):
         chatbot = gr.Chatbot(label="Conversation")
         msg = gr.Textbox(
             label=f"Chat with {coach_name_short}", 
-            max_lines=10,
             placeholder="Type your message here... (MAX: 1000 characters)",
             interactive=False
         )