Update app.py

app.py

@@ -780,47 +780,58 @@ def create_interface():
         color: white !important;
     }
     
-    /* Target the file upload component */
+    /* Create a compact file upload button */
     [data-testid="file"] {
-        margin-left: 15px !important;
         width: 150px !important;
+        margin-left: 15px !important;
+        height: 38px !important; /* Match height to radio buttons */
     }
     
-    /* Style the file upload button to match original design */
-    [data-testid="file"] [data-testid="block"] > div:first-child {
-        height: 40px !important;
+    /* Hide the drop area completely */
+    [data-testid="file"] [data-testid="droparea"] {
+        height: 38px !important;
+        min-height: 38px !important;
+        max-height: 38px !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        border-radius: 4px !important;
         background-color: #f0f0f0 !important;
         border: 1px solid #d9d9d9 !important;
-        border-radius: 4px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
-        text-align: center !important;
+        overflow: hidden !important;
     }
     
-    /* Hide the drop area text and icon */
-    [data-testid="file"] [data-testid="block"] svg,
-    [data-testid="file"] [data-testid="block"] p,
-    [data-testid="file"] [data-testid="block"] > div:not(:first-child) {
+    /* Hide all elements inside the drop area */
+    [data-testid="file"] [data-testid="droparea"] > * {
         display: none !important;
     }
     
-    /* Add custom text */
-    [data-testid="file"] [data-testid="block"]::before {
+    /* Add a custom button */
+    [data-testid="file"] [data-testid="droparea"]::before {
         content: "Upload Document" !important;
-        position: absolute !important;
-        z-index: 10 !important;
-        pointer-events: none !important;
+        display: block !important;
+        font-size: 14px !important;
+        color: #333 !important;
     }
     
-    /* Hide the existing text without breaking functionality */
-    [data-testid="file"] [data-testid="block"] span {
+    /* Make sure the file input is still accessible but invisible */
+    [data-testid="file"] input[type="file"] {
+        position: absolute !important;
+        width: 150px !important;
+        height: 38px !important;
+        top: 0 !important;
+        left: 15px !important;
         opacity: 0 !important;
-        height: 0 !important;
+        cursor: pointer !important;
+        z-index: 100 !important;
     }
     
-    /* Hide the "or" text that appears */
-    [data-testid="file"] .or {
+    /* Hide the "or" text and other elements */
+    [data-testid="file"] .or,
+    [data-testid="file"] p,
+    [data-testid="file"] svg {
         display: none !important;
     }
     """