Update app.py

app.py

@@ -26,11 +26,14 @@ custom_css = """
     max-width: 1200px !important;
     margin: 0 auto !important;
     font-family: 'Inter', sans-serif;
+    height: 100vh !important;
+    overflow-y: auto !important;
 }
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
+    height: 100%;
 }
 .chat-container {
     border: 1px solid #e0e0e0;
@@ -39,6 +42,8 @@ custom_css = """
     background: white;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     margin-bottom: 20px;
+    height: calc(100vh - 200px);
+    overflow-y: auto;
 }
 .file-upload {
     border: 2px dashed #e0e0e0;
@@ -60,6 +65,7 @@ custom_css = """
     padding: 24px;
     text-align: center;
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    margin-bottom: 20px;
 }
 .record-button {
     background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
@@ -123,12 +129,51 @@ custom_css = """
     border-radius: 12px !important;
     border: 2px solid #e0e0e0 !important;
     padding: 16px !important;
+    height: calc(100vh - 300px) !important;
+    overflow-y: auto !important;
 }
 @keyframes pulse {
     0% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
     50% { transform: scale(1.05); box-shadow: 0 6px 8px rgba(244, 67, 54, 0.3); }
     100% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
 }
+
+/* Fix for Gradio's internal scrolling */
+#component-0 {
+    height: 100% !important;
+    overflow-y: auto !important;
+}
+#component-1 {
+    height: 100% !important;
+    overflow-y: auto !important;
+}
+#component-2 {
+    height: 100% !important;
+    overflow-y: auto !important;
+}
+
+/* Ensure the chat interface takes full height */
+#chat-interface {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* Make sure the chat messages container scrolls */
+#chat-messages {
+    flex: 1 !important;
+    overflow-y: auto !important;
+    padding: 20px !important;
+}
+
+/* Ensure the input area stays at the bottom */
+#chat-input {
+    position: sticky !important;
+    bottom: 0 !important;
+    background: white !important;
+    padding: 20px !important;
+    border-top: 1px solid #e0e0e0 !important;
+}
 """
 
 # Custom audio recorder component with improved styling