Update app.py

app.py

@@ -174,11 +174,11 @@ def respond_with_enhanced_streaming(message, history):
 custom_css = """
 /* Main container and background - full viewport */
 .gradio-container {
+    height: 100vh;
     background-color: rgb(240, 236, 230) !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    height: 100vh !important;
     width: 100vw !important;
-    overflow: hidden;
+    overflow: auto;
     margin: 0 !important;
     padding: 0 !important;
     max-width: none !important;
@@ -186,17 +186,16 @@ custom_css = """
 
 /* Main layout container - full width, sectioned heights */
 .main-container {
-    width: 98vw; /* Sets the width to 98% of the viewport width */
-    height: 100vh; /* Fill the entire viewport height */
-    margin: 0 auto; /* Center the container horizontally */
+    width: 98vw;
+    height: 100vh;
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
 }
 
-/* Section 1: Title section - 15% of viewport height */
+/* Section 1: Title section */
 .title-section {
-    height: 15vh;
-    width: 100vw;
+    flex: 0 0 15vh;
     padding: 1rem 2rem;
     background-color: rgb(240, 236, 230);
     border-bottom: 2px solid rgba(28, 18, 5, 0.1);
@@ -216,21 +215,19 @@ custom_css = """
     width: 100%;
 }
 
-/* Section 2: Chat content area - 60% of viewport height */
+/* Section 2: Chat content area */
 .chat-content {
-    height: 60vh;
-    width: 100vw;
+    flex: 1 1 60vh;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow: auto; 
     max-width: none !important;
     margin: 0 !important;
     padding: 0 !important;
     background-color: rgb(240, 236, 230);
-    flex-shrink: 0;
 }
 
-/* Chatbot styling - uses full 60vh */
+/* Chatbot styling */
 .gradio-chatbot {
     height: 100% !important;
     overflow-y: auto;
@@ -280,9 +277,9 @@ custom_css = """
     display: none !important;
 }
 
-/* Section 3: Input section - 25% of viewport height */
+/* Section 3: Input section */
 .input-section {
-    height: 25vh;
+    flex: 0 0 25vh;
     width: 100vw;
     background-color: rgb(240, 236, 230);
     border-top: 2px solid rgba(28, 18, 5, 0.1);
@@ -295,21 +292,17 @@ custom_css = """
     flex-shrink: 0;
 }
 
-/* Input textbox styling - takes most of the 25vh */
+/* Input textbox styling */
 .input-container {
     width: 100% !important;
     max-width: none !important;
     flex: 1;
     display: flex;
     align-items: center;
-}
-
-.input-container .wrap {
     background-color: rgb(242, 238, 233) !important;
     border: 2px solid rgb(28, 18, 5) !important;
     border-radius: 20px !important;
     box-shadow: none !important;
-    width: 100% !important;
     min-height: 60px;
     max-height: calc(25vh - 4rem);
 }
@@ -325,7 +318,6 @@ custom_css = """
     width: 100% !important;
     resize: none !important;
     min-height: 30px;
-    max-height: calc(25vh - 6rem);
 }
 
 .input-container textarea:focus {
@@ -370,20 +362,16 @@ custom_css = """
 .title-section, .input-section {
     overflow: hidden;
 }
-
-.chat-content {
-    overflow: hidden;
-}
 """
 
 with gr.Blocks(css=custom_css, title="EduBot") as demo:
     with gr.Column(elem_classes=["main-container"]):
         
-        # Section 1: Title Box - 15% of viewport height
+        # Section 1: Title Box
         with gr.Column(elem_classes=["title-section"]):
             gr.HTML('<div class="model-name">🎓 EduBot</div>')
         
-        # Section 2: Chat History/Conversation Viewport - 60% of viewport height
+        # Section 2: Chat History/Conversation Viewport
         with gr.Column(elem_classes=["chat-content"]):
             chatbot = gr.Chatbot(
                 type="messages",
@@ -392,7 +380,7 @@ with gr.Blocks(css=custom_css, title="EduBot") as demo:
                 avatar_images=None
             )
         
-        # Section 3: Text Box/Clear Button - 25% of viewport height
+        # Section 3: Text Box/Clear Button
         with gr.Column(elem_classes=["input-section"]):
             clear = gr.Button("Clear", elem_classes=["clear-btn"])
             msg = gr.Textbox(