Update app.py

app.py

@@ -367,13 +367,23 @@ custom_css = """
 /* Import Oswald font - Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
+/* HIDE the HTML components that create scrollbars */
+#component-1, #component-2, #component-3 {
+    display: none !important;
+}
+
+/* Hide any block containers with auto-margin that might be causing spacing */
+.block.svelte-1svsvh2.hide-container.auto-margin {
+    display: none !important;
+}
+
 /* Apply Oswald globally */
 *, *::before, *::after {
     font-family: "Oswald", sans-serif !important;
     color: #120f0e !important;
 }
 
-/* Main container styling - viewport height */
+/* Main container styling - viewport height with no top margin */
 .gradio-container-5-42-0 {
     background-color: rgb(240, 236, 230) !important;
     font-family: "Oswald", sans-serif !important;
@@ -383,16 +393,30 @@ custom_css = """
     height: 100vh !important;
     max-height: 100vh !important;
     overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
 }
 
-/* Title styling - compact */
+/* Target Gradio's internal structure */
+.gradio-container-5-42-0 > div {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+}
+
+/* Title styling - compact and at very top */
 .title-header {
     background-color: rgb(240, 236, 230) !important;
     padding: 10px 20px;
-    margin: 0;
+    margin: 0 !important;
     border-bottom: 1pt solid #59524f;
     text-align: left;
-    flex-shrink: 0;
+    flex-shrink: 0 !important;
+    height: 60px !important;
+    display: flex !important;
+    align-items: center !important;
 }
 .title-header h1 {
     font-size: 1.5rem;
@@ -402,41 +426,17 @@ custom_css = """
     padding: 0;
 }
 
-/* Row container styling */
-.main-row {
-    height: calc(100vh - 60px) !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-
-.title-row {
-    flex-shrink: 0 !important;
-    height: 60px !important;
-}
-
-.chat-row {
-    flex: 1 !important;
-    overflow: hidden !important;
-    padding: 10px 20px !important;
-}
-
-.input-row {
-    flex-shrink: 0 !important;
-    height: 120px !important;
-    padding: 15px 20px !important;
-}
-
-/* Chat styling - use remaining space */
-.chat-container,
-.gradio-container-5-42-0 .gradio-chatbot,
-.gradio-container-5-42-0 #main-chatbot {
+/* Chat styling - use available space */
+.gradio-container-5-42-0 .gradio-chatbot {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
     padding: 15px !important;
-    height: 100% !important;
-    max-height: 100% !important;
+    height: calc(100vh - 160px) !important;
+    max-height: calc(100vh - 160px) !important;
     overflow-y: auto !important;
+    flex: 1 !important;
+    margin: 15px 20px !important;
 }
 
 /* Message styling */
@@ -468,29 +468,37 @@ custom_css = """
     margin-bottom: 10px !important;
 }
 
-/* Input section styling - compact */
-.input-section {
-    background-color: rgb(240, 236, 230) !important;
-    border-top: 1pt solid #59524f;
-    padding: 0 !important;
-    height: 100% !important;
+/* Input controls layout */
+.input-controls {
     display: flex !important;
-    align-items: center !important;
-    gap: 10px !important;
+    gap: 15px !important;
+    align-items: stretch !important;
+    height: 60px !important;
+    padding: 15px 20px !important;
+    background-color: rgb(240, 236, 230) !important;
+    border-top: 1pt solid #59524f !important;
+    flex-shrink: 0 !important;
 }
 
 /* Button styling - compact */
+.button-column {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 5px !important;
+    min-width: 80px !important;
+}
+
 .gradio-container-5-42-0 .send-button,
 .gradio-container-5-42-0 .clear-button {
     color: #120f0e !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
-    padding: 8px 12px !important;
+    padding: 6px 12px !important;
     cursor: pointer !important;
     margin: 0 !important;
     font-weight: 500 !important;
-    height: 40px !important;
-    min-width: 70px !important;
+    height: 22px !important;
+    font-size: 11px !important;
 }
 
 .gradio-container-5-42-0 .send-button {
@@ -501,31 +509,46 @@ custom_css = """
     background-color: #ada3a0 !important;
 }
 
-/* Textbox styling - compact */
+/* Textbox styling - single line */
 .gradio-container-5-42-0 .input-textbox {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 8px !important;
     flex: 1 !important;
+    height: 50px !important;
 }
 
 .gradio-container-5-42-0 .input-textbox textarea {
     background-color: #d9d1ce !important;
     border: none !important;
     color: #120f0e !important;
-    padding: 10px !important;
+    padding: 12px !important;
     font-size: 14px !important;
     font-weight: 400 !important;
     resize: none !important;
-    height: 40px !important;
-    min-height: 40px !important;
-    max-height: 40px !important;
+    height: 50px !important;
+    min-height: 50px !important;
+    max-height: 50px !important;
+    line-height: 1.2 !important;
 }
 
 .gradio-container-5-42-0 .input-textbox textarea::placeholder {
     font-weight: 300 !important;
     color: rgba(18, 15, 14, 0.6) !important;
 }
+
+/* Hide any scrollbars that might appear incorrectly */
+body {
+    overflow: hidden !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+html {
+    overflow: hidden !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
 """
 
 # --- UI: HTML Head Content ---
@@ -609,36 +632,30 @@ def create_interface():
         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)
         
-        # Row 1: Title Section
-        with gr.Row():
-            gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
+        # Title Section
+        gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
         
-        # Row 2: Chat Section
-        with gr.Row():
-            chatbot = gr.Chatbot(
-                type="messages",
-                show_copy_button=True,
-                show_share_button=False,
-                avatar_images=None,
-                height=880,
-                elem_classes=["chat-container"],
-                container=True,
-                elem_id="main-chatbot"
-            )
+        # Chat Section
+        chatbot = gr.Chatbot(
+            type="messages",
+            show_copy_button=True,
+            show_share_button=False,
+            avatar_images=None,
+            elem_id="main-chatbot"
+        )
         
-        # Row 3: Input Section
-        with gr.Row(elem_classes=["input-section"]):
-            with gr.Column(scale=4):
-                msg = gr.Textbox(
-                    placeholder="Ask me about math, research, study strategies, or any educational topic...",
-                    show_label=False,
-                    lines=3,
-                    max_lines=8,
-                    elem_classes=["input-textbox"]
-                )
-            with gr.Column(scale=1):
-                send = gr.Button("Send", elem_classes=["send-button"])
-                clear = gr.Button("Clear", elem_classes=["clear-button"])
+        # 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])