Adjusting style

app.py

@@ -164,21 +164,10 @@ def respond_with_enhanced_streaming(message, history):
 
 # --- Fixed Gradio UI and CSS ---
 custom_css = """
-/* Reset and base styling */
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-}
-
 /* Main container styling */
 .gradio-container {
     background-color: rgb(240, 236, 230) !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    height: 100vh !important;
-    max-width: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
 }
 
 /* Title styling */
@@ -196,24 +185,20 @@ html, body {
     margin: 0;
 }
 
-/* Chat container - give it proper height */
+/* Chat container */
 .chat-container {
-    height: calc(100vh - 200px) !important;
-    min-height: 400px !important;
+    min-height: 500px;
     background-color: rgb(240, 236, 230);
 }
 
-/* Chatbot specific styling */
-.chat-container .gradio-chatbot {
-    height: 100% !important;
-    min-height: 400px !important;
-    max-height: none !important;
+/* Chatbot styling */
+.gradio-chatbot {
     background-color: transparent !important;
     border: none !important;
     padding: 20px !important;
 }
 
-/* Fix message styling */
+/* Message styling */
 .gradio-chatbot .message.bot .markdown {
     background-color: rgb(240, 185, 103) !important;
     color: black !important;
@@ -250,30 +235,6 @@ html, body {
     background-color: rgb(240, 236, 230);
     border-top: 2px solid rgba(28, 18, 5, 0.1);
     padding: 20px;
-    min-height: 80px;
-}
-
-/* Input textbox styling */
-.input-section .gradio-textbox {
-    background-color: rgb(242, 238, 233) !important;
-    border: 2px solid rgb(28, 18, 5) !important;
-    border-radius: 20px !important;
-    margin-bottom: 10px !important;
-}
-
-.input-section .gradio-textbox textarea {
-    background-color: transparent !important;
-    border: none !important;
-    color: black !important;
-    padding: 15px !important;
-    font-size: 16px !important;
-    min-height: 50px !important;
-    resize: vertical !important;
-}
-
-.input-section .gradio-textbox textarea:focus {
-    outline: none !important;
-    box-shadow: none !important;
 }
 
 /* Clear button styling */
@@ -284,23 +245,26 @@ html, body {
     border-radius: 10px !important;
     padding: 8px 16px !important;
     cursor: pointer !important;
-    float: right;
+    margin-bottom: 10px !important;
 }
 
 .clear-button:hover {
     background-color: rgba(28, 18, 5, 0.8) !important;
 }
 
-/* Remove default margins and padding that might interfere */
-.gradio-container .block {
-    margin: 0 !important;
-    padding: 0 !important;
-    border: none !important;
+/* Textbox styling */
+.input-textbox {
+    background-color: rgb(242, 238, 233) !important;
+    border: 2px solid rgb(28, 18, 5) !important;
+    border-radius: 20px !important;
 }
 
-/* Ensure proper scrolling */
-.gradio-chatbot {
-    overflow-y: auto !important;
+.input-textbox textarea {
+    background-color: transparent !important;
+    border: none !important;
+    color: black !important;
+    padding: 15px !important;
+    font-size: 16px !important;
 }
 """
 
@@ -309,26 +273,25 @@ with gr.Blocks(css=custom_css, title="EduBot") as demo:
     # Title Section
     gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
     
-    # Chat Section - with explicit height
+    # Chat Section
     with gr.Row(elem_classes=["chat-container"]):
         chatbot = gr.Chatbot(
             type="messages",
             show_copy_button=True,
             show_share_button=False,
             avatar_images=None,
-            height="100%"
+            height=500
         )
     
     # Input Section
     with gr.Column(elem_classes=["input-section"]):
-        with gr.Row():
-            clear = gr.Button("Clear", elem_classes=["clear-button"])
+        clear = gr.Button("Clear", elem_classes=["clear-button"])
         msg = gr.Textbox(
             placeholder="Ask me about math, research, study strategies, or any educational topic...",
             show_label=False,
-            lines=2,
-            max_lines=6,
-            interactive=True
+            lines=3,
+            max_lines=8,
+            elem_classes=["input-textbox"]
         )
 
     def respond_and_update(message, history):