Improve CSS height adjustment to avoid weird height over-growing issues

app.py

@@ -117,7 +117,7 @@ def run_chat_inference(history, message, state):
 
     # Reinitialize the OpenAI client with a random endpoint from the list
     setup_model(model_config.get('MODEL_KEY'))
-    log_info("Using model {model_name} with endpoint {model_config.get('base_url')}")
+    log_info(f"Using model {model_name} with endpoint {model_config.get('base_url')}")
 
     if len(history) == 0:
         state["chat_id"] = uuid4().hex
@@ -531,7 +531,8 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
 
     chatbot = gr.Chatbot(
         type="messages",
-        height="calc(100dvh - 310px)",
+        height="calc(100svh - 320px)",
+        max_height="calc(100svh - 320px)",
         elem_classes="chatbot",
     )
 

styles.css

@@ -26,10 +26,6 @@
     padding: 0;
 }
 
-.chatbot {
-    max-height: 1400px;
-}
-
 .user-input-container .multimodal-textbox{
     border: none !important;
 }
@@ -62,7 +58,19 @@ button.cancel:hover, .cancel[disabled] {
     color: var(--neutral-400) !important;
 }
 
-@media (max-width: 800px) {
+.chatbot {
+    height: calc(100svh - 320px) !important;
+    max_height: calc(100svh - 320px) !important;
+    max-height: 1400px;
+}
+
+@media (max-width: 1280px) {
+    .chatbot {
+        max-height: calc(-320px + 100svh) !important;
+    }
+}
+
+@media (max-width: 1024px) {
     .responsive-row {
         flex-direction: column;
     }
@@ -78,7 +86,7 @@ button.cancel:hover, .cancel[disabled] {
     }
 
     .chatbot {
-        max-height: 800px;
+        max-height: calc(-450px + 100svh) !important;
     }
 }
 
@@ -98,30 +106,12 @@ button.cancel:hover, .cancel[disabled] {
     }
 
     .chatbot {
-        max-height: 360px;
-    }
-}
-
-@media (max-width: 1280px) {
-    .chatbot {
-        max-height: 900px;
+        max-height: 360px !important;
     }
 }
 
 @media (max-height: 932px) {
     .chatbot {
-        max-height: calc(100dvh - 400px);
-    }
-}
-
-@media (max-height: 1280px) {
-    .chatbot {
-        max-height: calc(100dvh - 400px);
+        min-height: 320px;
     }
 }
-
-@media (min-height: 1281px) {
-    .chatbot {
-        /*max-height: calc(100dvh - 400px);*/
-    }
-}