Fixing css

app.py

@@ -151,6 +151,14 @@ chat_interface = gr.ChatInterface(
         ["How does Kant's Categorical Imperative work?"],
         ["What is the problem of consciousness in philosophy of mind?"],
     ],
+    title="Philosophy Chat with Llama 3.1",
+    theme=gr.themes.Default(
+        text_alignment="left",
+    ),
+    chatbot=gr.Chatbot(
+        show_label=False,
+        avatar_images=(None, None),
+    ),
 )
 
 with gr.Blocks(css="style.css") as demo:

style.css

@@ -14,23 +14,41 @@ h1 {
   max-width: 900px;
   margin: auto;
   padding-top: 1.5rem;
-  max-height: none !important;
 }
 
-.message-wrap {
-  overflow: hidden !important;
+/* Prevent auto-scrolling behavior */
+.chatbot {
+  height: 600px !important;
+  overflow-y: auto !important;
 }
 
-.chat {
+.chatbot-container {
   height: auto !important;
-  max-height: 800px !important;
+  overflow: visible !important;
 }
 
-.scroll-hide {
-  scroll-behavior: auto !important;
+.message-wrap {
+  overflow: visible !important;
 }
 
-#component-0 {
-  height: auto !important;
-  max-height: 800px !important;
+/* Fix input area */
+.input-row {
+  position: sticky !important;
+  bottom: 0 !important;
+  background: var(--background-fill-primary);
+  padding: 1rem 0;
+  margin: 0;
+}
+
+/* Ensure chat container doesn't jump */
+#chatbot {
+  min-height: 400px;
+  max-height: 600px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+/* Disable auto-scroll */
+.scroll-lock {
+  overflow: hidden !important;
 }