Upload app.py with huggingface_hub

app.py

@@ -285,15 +285,13 @@ body, .gradio-container {
     padding: 0 !important;
 }
 
-/* The actual pill — compact size */
+/* The actual pill — sized to fit its content, not clipped */
 #model-bar {
     background: linear-gradient(90deg, #14336b, #0f2a57) !important;
     border: 1px solid #2f5aa8 !important;
     border-radius: 999px !important;
-    padding: 6px 16px !important;
-    width: auto !important;
-    min-width: 260px !important;
-    max-width: 320px !important;
+    padding: 8px 20px !important;
+    width: fit-content !important;
     display: inline-flex !important;
     align-items: center !important;
     box-shadow: 0 0 0 1px rgba(59,130,246,0.15) inset;
@@ -308,6 +306,7 @@ body, .gradio-container {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
+    width: fit-content !important;
 }
 #model-bar select, #model-bar input {
     background: transparent !important;
@@ -316,12 +315,19 @@ body, .gradio-container {
     font-size: 13px !important;
     border: none !important;
     white-space: nowrap !important;
-    overflow: visible !important;
-    text-overflow: unset !important;
-    min-width: 160px !important;
+    width: auto !important;
 }
 
 .section-title { font-size: 22px; font-weight: 700; color: #f8fafc; margin: 8px 0 14px 0; }
+
+/* Force Input Panel and Detection Output columns to start flush at the top */
+#main-panels-row {
+    align-items: flex-start !important;
+}
+#main-panels-row > * {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+}
 .card-subtext { color: #94a3b8; font-size: 14px; margin-top: 8px; line-height: 1.7; }
 .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; margin-bottom: 6px; }
 .summary-card { background: linear-gradient(180deg, #141d2d 0%, #0f172a 100%); border: 1px solid #243042; border-radius: 16px; padding: 16px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; }
@@ -383,10 +389,10 @@ with gr.Blocks(css=CUSTOM_CSS) as demo:
             show_label=True,
             container=False,
             scale=0,
-            min_width=260,
+            min_width=0,
         )
 
-    with gr.Row(equal_height=True):
+    with gr.Row(equal_height=False, elem_id="main-panels-row"):
         with gr.Column(scale=4):
             gr.HTML('<div class="section-title">📤 Input Panel</div>')