Upload app.py

app.py

@@ -1342,21 +1342,45 @@ html, body {
     font-weight: 900 !important;
 }
 
-/* Exact Input + Label file-control treatment from the supplied React example.
-   mx-auto max-w-xs space-y-2  -> centered, max-width 20rem (320px), 0.5rem spacing.
-   Neutral gray only: no gradient, cyan glow, dashed drop-zone treatment, or large upload card. */
+/* File input laid out as one horizontal row:
+   label | compact file picker | helper text. */
 .input-file-example {
     width: 100% !important;
-    max-width: 20rem !important; /* Tailwind max-w-xs = 320px */
-    margin-left: auto !important;
-    margin-right: auto !important;
-    gap: 0.5rem !important;      /* Tailwind space-y-2 */
+    max-width: none !important;
+    margin: 0 !important;
     padding: 0 !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    flex-wrap: nowrap !important;
+    gap: 0.75rem !important;
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
 }
 
+/* Keep Gradio's child wrappers from stretching each item onto its own line. */
+.input-file-example > * {
+    margin: 0 !important;
+}
+.input-file-example .input-file-label-wrap {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    min-width: max-content !important;
+}
+.input-file-example .input-file-control {
+    flex: 0 0 20rem !important;
+    width: 20rem !important;
+    max-width: 20rem !important;
+    min-width: 16rem !important;
+}
+.input-file-example .input-file-help-wrap {
+    flex: 1 1 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+}
+
 .input-file-example .input-file-label {
     display: block !important;
     margin: 0 !important;
@@ -1364,13 +1388,12 @@ html, body {
     font-size: 0.875rem !important;
     line-height: 1.25rem !important;
     font-weight: 500 !important;
+    white-space: nowrap !important;
 }
 
-/* Gradio component shell: make it behave visually like <Input type="file" className="mt-2" />. */
+/* Gradio component shell: compact native-style file field. */
 .input-file-control {
-    width: 100% !important;
-    min-width: 0 !important;
-    margin-top: 0.5rem !important; /* mt-2 */
+    margin: 0 !important;
     padding: 0 !important;
     background: transparent !important;
     border: 0 !important;
@@ -1482,11 +1505,12 @@ html, body {
 }
 
 .input-file-example .input-file-help {
-    margin: 0.5rem 0 0 0 !important; /* mt-2 */
-    color: #6b7280 !important;       /* text-gray-500 / dark:text-gray-500 */
-    font-size: 0.75rem !important;   /* text-xs */
+    margin: 0 !important;
+    color: #6b7280 !important;
+    font-size: 0.75rem !important;
     line-height: 1rem !important;
     font-weight: 400 !important;
+    white-space: nowrap !important;
 }
 
 .gradio-container table,
@@ -1666,9 +1690,12 @@ except Exception:
     HORT_THEME = None
 
 def make_exact_file_input():
-    """Render the supplied React InputFileExample visual using a functional Gradio File input."""
-    with gr.Column(elem_classes=["input-file-example"]):
-        gr.HTML('<label class="input-file-label">Upload a file</label>')
+    """Render label, file picker, and helper text on one horizontal line."""
+    with gr.Row(elem_classes=["input-file-example"]):
+        gr.HTML(
+            '<label class="input-file-label">Upload a file</label>',
+            elem_classes=["input-file-label-wrap"]
+        )
         file_component = gr.File(
             label="Upload a file",
             show_label=False,
@@ -1676,7 +1703,10 @@ def make_exact_file_input():
             height=36,
             elem_classes=["input-file-control"]
         )
-        gr.HTML('<p class="input-file-help">You are only allowed to upload .CSV, .XLSX or .XLS files.</p>')
+        gr.HTML(
+            '<p class="input-file-help">You are only allowed to upload .CSV, .XLSX or .XLS files.</p>',
+            elem_classes=["input-file-help-wrap"]
+        )
     return file_component