Update app.py

app.py

@@ -356,20 +356,32 @@ custom_css = """
 }
 
 .send-button, .clear-button {
-    background-color: #f09c7d !important;
-    color: #120f0e !important;
-    border: 1pt solid #59524f !important;
-    border-radius: 6px !important;
-    font-family: "Oswald", sans-serif !important;
-    font-weight: 500 !important;
-    padding: 8px 16px !important;
-    margin-bottom: 5px !important;
-    width: 100% !important;
+   border: 1pt solid #59524f !important;
+   border-radius: 6px !important;
+   font-weight: 500 !important;
+   padding: 8px 16px !important;
+   margin-bottom: 5px !important;
+   width: 100% !important;
+}
+
+.send-button {
+   background-color: #f09c7d !important;
+   color: #120f0e !important;
+}
+
+.send-button:hover {
+   background-color: #e8895a !important;
+   border-color: #4a3f3c !important;
 }
 
-.send-button:hover, .clear-button:hover {
-    background-color: #e8895a !important;
-    border-color: #4a3f3c !important;
+.clear-button {
+   background-color: #a69189 !important;
+   color: #120f0e !important;
+}
+
+.clear-button:hover {
+   background-color: #8f7d73 !important;
+   border-color: #4a3f3c !important;
 }
 
 /* Responsive design */
@@ -467,45 +479,61 @@ def clear_chat():
 
 # --- UI: Interface Creation ---
 def create_interface():
-    """Creates and configures the complete Gradio interface."""
-    
-    with gr.Blocks(css=custom_css, title="EduBot", fill_width=True, fill_height=True) as demo:
-        # Add head content and MathJax
-        gr.HTML(html_head_content)
-        gr.HTML('<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>')
-        gr.HTML(mathjax_config)
-        
-        # Title Section
-        gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
-        
-        # Chat Section
-        chatbot = gr.Chatbot(
-            type="messages",
-            show_copy_button=True,
-            show_share_button=False,
-            avatar_images=None,
-            elem_id="main-chatbot"
-        )
-        
-        # Input Section
-        with gr.Row(elem_classes=["input-controls"]):
-            msg = gr.Textbox(
-                placeholder="Ask me about math, research, study strategies, or any educational topic...",
-                show_label=False,
-                lines=1,
-                max_lines=1,
-                elem_classes=["input-textbox"]
-            )
-            with gr.Column(elem_classes=["button-column"]):
-                send = gr.Button("Send", elem_classes=["send-button"], size="sm")
-                clear = gr.Button("Clear", elem_classes=["clear-button"], size="sm")
-
-        # Set up event handlers
-        msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
-        send.click(respond_and_update, [msg, chatbot], [chatbot, msg])
-        clear.click(clear_chat, outputs=[chatbot, msg])
-        
-        return demo
+   """Creates and configures the complete Gradio interface."""
+   
+   with gr.Blocks(
+       css=custom_css, 
+       title="EduBot", 
+       fill_width=True, 
+       fill_height=True,
+       theme=gr.themes.Base()
+   ) as demo:
+       # Add head content and MathJax
+       gr.HTML(html_head_content)
+       gr.HTML('<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>')
+       gr.HTML(mathjax_config)
+       
+       # Force full height container with aggressive CSS
+       gr.HTML('<style>.main-container { height: 100vh !important; display: flex !important; flex-direction: column !important; }</style>')
+       
+       with gr.Column(elem_classes=["main-container"]):
+           # Title Section - in its own row
+           with gr.Row():
+               gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
+           
+           # Chat Section - this should expand to fill ALL available space
+           chatbot = gr.Chatbot(
+               type="messages",
+               show_copy_button=True,
+               show_share_button=False,
+               avatar_images=None,
+               elem_id="main-chatbot",
+               container=False,  # Remove wrapper
+               scale=1,
+               height="70vh"  # Explicit height instead of min_height
+           )
+           
+           # Input Section - fixed height
+           with gr.Row(elem_classes=["input-controls"]):
+               msg = gr.Textbox(
+                   placeholder="Ask me about math, research, study strategies, or any educational topic...",
+                   show_label=False,
+                   lines=1,
+                   max_lines=1,
+                   elem_classes=["input-textbox"],
+                   container=False,
+                   scale=4
+               )
+               with gr.Column(elem_classes=["button-column"], scale=1):
+                   send = gr.Button("Send", elem_classes=["send-button"], size="sm")
+                   clear = gr.Button("Clear", elem_classes=["clear-button"], size="sm")
+
+       # Set up event handlers
+       msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
+       send.click(respond_and_update, [msg, chatbot], [chatbot, msg])
+       clear.click(clear_chat, outputs=[chatbot, msg])
+       
+       return demo
 
 # ===============================================================================
 # END UI CONFIGURATION SECTION