Widen and rebalance HF layout

app.py

@@ -1018,7 +1018,20 @@ CUSTOM_CSS = """
     --ovc-line-accent-strong: rgba(79,70,229,0.58);
     --ovc-line-cyan: rgba(6,182,212,0.26);
 }
-.gradio-container { max-width: 1320px !important; margin: 0 auto !important; }
+.gradio-container {
+    max-width: 1480px !important;
+    margin: 0 auto !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+}
+.ovc-main {
+    gap: 18px !important;
+    align-items: flex-start !important;
+}
+.ovc-bottom {
+    gap: 16px !important;
+    align-items: stretch !important;
+}
 @keyframes ovc-shift {
     0%   { background-position: 0% 50%; }
     50%  { background-position: 100% 50%; }
@@ -1121,6 +1134,9 @@ CUSTOM_CSS = """
     border-color: var(--ovc-line-accent) !important;
     box-shadow: 0 6px 22px rgba(15,23,42,0.07);
 }
+.ovc-card + .ovc-card {
+    margin-top: 2px;
+}
 /* Primary outputs: subtle accent ring + lift */
 .ovc-card-primary {
     border: 1px solid var(--ovc-ring) !important;
@@ -1208,6 +1224,15 @@ CUSTOM_CSS = """
 
 /* Tighter spacing for sliders inside cards */
 .ovc-card .gradio-slider { margin-bottom: 4px !important; }
+.ovc-card .gradio-number,
+.ovc-card .gradio-radio,
+.ovc-card .gradio-checkbox,
+.ovc-card .gradio-code,
+.ovc-card .gradio-gallery,
+.ovc-card .gradio-video,
+.ovc-card .gradio-plot {
+    width: 100% !important;
+}
 
 /* Tame Gradio's dark default placeholders inside our cards: blanket-override
    any background on the inner wrappers, then paint a brand-tinted gradient on
@@ -1267,6 +1292,25 @@ CUSTOM_CSS = """
     background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(6,182,212,0.025)) !important;
     border: 1px solid rgba(79,70,229,0.34) !important;
 }
+.ovc-card .upload-container,
+.ovc-card .video-container,
+.ovc-card .image-container,
+.ovc-card .plot-container {
+    width: 100% !important;
+    min-width: 0 !important;
+}
+.ovc-card .upload-container,
+.ovc-card [data-testid="file-upload"] {
+    min-height: 220px !important;
+}
+.ovc-card .plot-container,
+.ovc-card [data-testid="plot"] {
+    min-height: 300px !important;
+}
+.ovc-card-primary .video-container,
+.ovc-card [data-testid="video"] {
+    min-height: 260px !important;
+}
 .ovc-card .gradio-video, .ovc-card .gradio-image, .ovc-card .gradio-plot {
     border-color: var(--ovc-line) !important;
     background: transparent !important;
@@ -1327,6 +1371,10 @@ CUSTOM_CSS = """
         flex-direction: column !important;
         gap: 12px !important;
     }
+    .gradio-container .ovc-bottom {
+        flex-direction: column !important;
+        gap: 12px !important;
+    }
     .gradio-container .ovc-main > div {
         width: 100% !important;
         min-width: 0 !important;
@@ -1355,6 +1403,10 @@ CUSTOM_CSS = """
 
     /* Outputs: shorter video so it does not dominate the screen */
     .ovc-card video { max-height: 280px !important; }
+    .ovc-card .upload-container,
+    .ovc-card [data-testid="file-upload"] {
+        min-height: 180px !important;
+    }
 }
 
 @media (max-width: 480px) {
@@ -1431,10 +1483,10 @@ with gr.Blocks(**_BLOCK_KW) as demo:
 
     with gr.Row(equal_height=False, elem_classes="ovc-main"):
         # ─── Controls (narrow column) ────────────────────────────────────
-        with gr.Column(scale=4, min_width=320):
+        with gr.Column(scale=4, min_width=360):
             with gr.Group(elem_classes="ovc-card"):
                 gr.Markdown("### Input")
-                video_in = gr.Video(label="Video", sources=["upload"], height=240)
+                video_in = gr.Video(label="Video", sources=["upload"], height=260)
                 with gr.Row(elem_classes="ovc-preset"):
                     btn_demo = gr.Button(
                         "Load demo video", size="sm",
@@ -1527,11 +1579,11 @@ with gr.Blocks(**_BLOCK_KW) as demo:
                 run_btn = gr.Button("Run pipeline", variant="primary")
 
         # ─── Outputs (wide column) ───────────────────────────────────────
-        with gr.Column(scale=6, min_width=420):
+        with gr.Column(scale=7, min_width=560):
             with gr.Group(elem_classes="ovc-card ovc-card-primary"):
                 gr.Markdown("### Patch selection visualization")
                 vis_out = gr.Video(
-                    label="", show_label=False, autoplay=True, height=420,
+                    label="", show_label=False, autoplay=True, height=460,
                 )
 
             with gr.Group(elem_classes="ovc-card ovc-card-primary"):
@@ -1549,8 +1601,8 @@ with gr.Blocks(**_BLOCK_KW) as demo:
                 )
                 chart_out = gr.Plot(label="", show_label=False)
 
-            with gr.Row():
-                with gr.Column(scale=1):
+            with gr.Row(equal_height=False, elem_classes="ovc-bottom"):
+                with gr.Column(scale=7, min_width=420):
                     with gr.Group(elem_classes="ovc-card"):
                         gr.Markdown("### Packed canvases (one per GOP group)")
                         gr.Markdown(
@@ -1561,11 +1613,11 @@ with gr.Blocks(**_BLOCK_KW) as demo:
                         )
                         canvas_out = gr.Gallery(
                             label="", show_label=False,
-                            columns=2, rows=2, height=380,
+                            columns=2, rows=2, height=420,
                             object_fit="contain",
                             preview=True,
                         )
-                with gr.Column(scale=1):
+                with gr.Column(scale=5, min_width=340):
                     with gr.Group(elem_classes="ovc-card"):
                         gr.Markdown("### Raw JSON")
                         gr.Markdown(
@@ -1575,7 +1627,7 @@ with gr.Blocks(**_BLOCK_KW) as demo:
                         )
                         with gr.Accordion("Show full JSON", open=False):
                             info_out = gr.Code(
-                                label="", language="json", lines=18,
+                                label="", language="json", lines=22,
                             )
 
     gr.HTML(