Adjust File component height to match text input box

app.py

@@ -247,11 +247,22 @@ css = """
     font-size: 12px !important;
 }
 .compact-image .upload-container {
-    min-height: 80px !important;
+    min-height: 60px !important;
+    max-height: 60px !important;
 }
 .compact-image .wrap .or {
     display: none !important;
 }
+.compact-file input[type="file"] {
+    height: 60px !important;
+}
+.compact-file .file-preview {
+    max-height: 60px !important;
+    overflow-y: auto !important;
+}
+.compact-file > div {
+    height: 60px !important;
+}
 """
 
 with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
@@ -290,7 +301,8 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
                         file_count="multiple",
                         file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
                         interactive=True,
-                        show_label=True
+                        show_label=True,
+                        elem_classes="compact-file"
                     )
                 with gr.Column(scale=1, min_width=100):
                     submit_btn = gr.Button("Send", variant="primary")