Improve file upload box styling - fix text cutoff and align with text input

app.py

@@ -293,74 +293,105 @@ def process_message(message, history, images, system_prompt, temperature, max_to
 
 # 创建Gradio界面
 css = """
-/* 强制设置File组件容器高度 */
-.compact-file, .compact-file > * {
-    height: 52px !important;
-    max-height: 52px !important;
-    min-height: 52px !important;
+/* 文本框样式 */
+#message-textbox textarea {
+    min-height: 54px !important;
+    max-height: 54px !important;
 }
 
-/* 使用ID选择器确保优先级 */
+/* File上传组件容器 */
 #image-upload {
-    height: 52px !important;
-    max-height: 52px !important;
-    min-height: 52px !important;
+    height: 54px !important;
+    min-height: 54px !important;
+    max-height: 54px !important;
+}
+
+/* File组件内部wrapper */
+#image-upload .wrap {
+    height: 54px !important;
+    min-height: 54px !important;
+    max-height: 54px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border-radius: 8px !important;
 }
 
-#image-upload > div,
-#image-upload .wrap,
-#image-upload .block,
-#image-upload .container {
-    height: 52px !important;
-    max-height: 52px !important;
-    min-height: 52px !important;
+/* 上传区域样式 */
+#image-upload .upload-container {
+    height: 54px !important;
+    min-height: 54px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+}
+
+/* Drop File Here 文字样式 */
+#image-upload .upload-text {
+    font-size: 13px !important;
+    margin: 0 !important;
     padding: 0 !important;
+    line-height: 1.2 !important;
+}
+
+/* or 文字样式 */
+#image-upload .or-text {
+    font-size: 11px !important;
     margin: 0 !important;
+    padding: 0 !important;
+    opacity: 0.7 !important;
+    line-height: 1 !important;
 }
 
-/* 文件上传按钮样式 */
-#image-upload button,
-.compact-file button {
-    height: 50px !important;
-    max-height: 50px !important;
-    min-height: 50px !important;
+/* 隐藏默认的 or 分隔符 */
+#image-upload .or {
+    display: none !important;
+}
+
+/* 上传按钮样式 */
+#image-upload button {
+    height: 54px !important;
     font-size: 13px !important;
-    padding: 0 12px !important;
-    margin: 1px !important;
+    padding: 0 16px !important;
+    white-space: nowrap !important;
 }
 
-/* 文件预览区域 */
-#image-upload .file-preview,
-.compact-file .file-preview {
-    height: 50px !important;
-    max-height: 50px !important;
+/* 文件预览样式 */
+#image-upload .file-preview {
+    height: 54px !important;
+    max-height: 54px !important;
     overflow-y: auto !important;
     font-size: 12px !important;
-    padding: 4px !important;
+    padding: 4px 8px !important;
+    display: flex !important;
+    align-items: center !important;
 }
 
 /* 隐藏标签 */
-#image-upload label,
-.compact-file label {
+#image-upload label {
     display: none !important;
 }
 
-/* 确保input元素也是正确高度 */
-#image-upload input[type="file"],
-.compact-file input[type="file"] {
-    height: 50px !important;
-    max-height: 50px !important;
+/* 确保所有子元素不超过容器高度 */
+#image-upload * {
+    max-height: 54px !important;
 }
 
-/* 文本框参考高度 */
-#message-textbox textarea {
-    min-height: 52px !important;
-    max-height: 52px !important;
+/* 调整上传区域文字布局 */
+#image-upload .center {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    height: 54px !important;
+    gap: 0 !important;
 }
 
-/* 使用通配符确保所有子元素 */
-#image-upload * {
-    max-height: 52px !important;
+/* 调整文字行高避免截断 */
+#image-upload span {
+    line-height: 1.2 !important;
+    display: block !important;
 }
 """