feat: 输入框高度调整适配更多设备

现在适配了最小横向分辨率为320px的设备（12 mini, iPad分屏）
还适配了iPad等的标签栏等

ChuanhuChatbot.py

@@ -49,7 +49,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
             with gr.Row():
                 chatbot = gr.Chatbot(elem_id="chuanhu_chatbot").style(height="100%")
             with gr.Row():
-                with gr.Column(min_width=280, scale=12):
+                with gr.Column(min_width=225, scale=12):
                     user_input = gr.Textbox(
                         elem_id="user_input_tb",
                         show_label=False, placeholder="在这里输入"

assets/custom.js

@@ -138,11 +138,18 @@ function setChatbotHeight() {
     const screenWidth = window.innerWidth;
     const statusDisplay = document.querySelector('#status_display');
     const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
-    if (screenWidth <= 499) {
-        const vh = window.innerHeight * 0.01;
-        document.documentElement.style.setProperty('--vh', `${vh}px`);
-
-        const chatbot = document.querySelector('#chuanhu_chatbot');
+    const chatbot = document.querySelector('#chuanhu_chatbot');
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+    if (screenWidth <= 320) {
+        if (chatbot) {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
+            const wrap = chatbot.querySelector('.wrap');
+            if (wrap) {
+                wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+            }
+        } 
+    } else if (screenWidth <= 499) {
         if (chatbot) {
             chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;
             const wrap = chatbot.querySelector('.wrap');
@@ -150,6 +157,14 @@ function setChatbotHeight() {
                 wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
             }
         }
+    } else {
+        if (chatbot) {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;
+            const wrap = chatbot.querySelector('.wrap');
+            if (wrap) {
+                wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+            }
+        }
     }
 }