Fix horizontal scroll - remove Column constraints and add white-space nowrap

- Remove Column wrappers that constrained HTML component width
- Add width: 100% and white-space: nowrap to container
- Wrap image in inline-block div for proper horizontal scrolling
- HTML components now expand full width with proper scroll in both directions
- Update UI to hint that scrolling is available

app.py

@@ -80,23 +80,28 @@ def apply_zoom_output(zoom_level):
     # Convert to base64 for HTML display
     img_base64 = array_to_base64(zoomed)
     
-    # Return HTML with scrollable container
+    # Return HTML with scrollable container that allows both directions
     html = f"""
     <div style="
         border: 1px solid #ccc;
         border-radius: 4px;
         overflow: auto;
         max-height: 600px;
+        width: 100%;
         padding: 10px;
         background-color: #f9f9f9;
-        display: inline-block;
+        white-space: nowrap;
+        box-sizing: border-box;
     ">
-        <img src="data:image/png;base64,{img_base64}" style="
-            width: {new_w}px;
-            height: {new_h}px;
-            display: block;
-            image-rendering: crisp-edges;
-        " />
+        <div style="display: inline-block;">
+            <img src="data:image/png;base64,{img_base64}" style="
+                width: {new_w}px;
+                height: {new_h}px;
+                display: block;
+                image-rendering: crisp-edges;
+                vertical-align: top;
+            " />
+        </div>
     </div>
     <p style="font-size: 12px; color: #666; margin-top: 5px;">
         Zoom: {zoom_level}% | Size: {new_w}×{new_h}px | Original: {w}×{h}px
@@ -122,23 +127,28 @@ def apply_zoom_preprocessed(zoom_level):
     # Convert to base64 for HTML display
     img_base64 = array_to_base64(zoomed)
     
-    # Return HTML with scrollable container
+    # Return HTML with scrollable container that allows both directions
     html = f"""
     <div style="
         border: 1px solid #ccc;
         border-radius: 4px;
         overflow: auto;
         max-height: 600px;
+        width: 100%;
         padding: 10px;
         background-color: #f9f9f9;
-        display: inline-block;
+        white-space: nowrap;
+        box-sizing: border-box;
     ">
-        <img src="data:image/png;base64,{img_base64}" style="
-            width: {new_w}px;
-            height: {new_h}px;
-            display: block;
-            image-rendering: crisp-edges;
-        " />
+        <div style="display: inline-block;">
+            <img src="data:image/png;base64,{img_base64}" style="
+                width: {new_w}px;
+                height: {new_h}px;
+                display: block;
+                image-rendering: crisp-edges;
+                vertical-align: top;
+            " />
+        </div>
     </div>
     <p style="font-size: 12px; color: #666; margin-top: 5px;">
         Zoom: {zoom_level}% | Size: {new_w}×{new_h}px | Original: {w}×{h}px
@@ -172,30 +182,33 @@ with gr.Blocks(title="Traffic Sign Detector") as demo:
         detect_btn = gr.Button("Detect Traffic Signs", variant="primary")
         reset_btn = gr.Button("Clear")
     
-    gr.Markdown("### Zoom & Inspect")
+    gr.Markdown("### Zoom & Inspect (Scroll horizontally and vertically as needed)")
     
     with gr.Row():
-        with gr.Column():
-            zoom_slider_output = gr.Slider(
-                minimum=50, 
-                maximum=300, 
-                value=100, 
-                step=10, 
-                label="Zoom Detected Image (%)",
-                info="Drag to zoom (50% to 300%)"
-            )
-            output_html = gr.HTML(label="Zoomed Detected Image")
-        
-        with gr.Column():
-            zoom_slider_preprocessed = gr.Slider(
-                minimum=50, 
-                maximum=300, 
-                value=100, 
-                step=10, 
-                label="Zoom Preprocessed Image (%)",
-                info="Drag to zoom (50% to 300%)"
-            )
-            preprocessed_html = gr.HTML(label="Zoomed Preprocessed Image")
+        zoom_slider_output = gr.Slider(
+            minimum=50, 
+            maximum=300, 
+            value=100, 
+            step=10, 
+            label="Zoom Detected Image (%)",
+            info="Drag to zoom (50% to 300%)",
+            scale=1
+        )
+    
+    output_html = gr.HTML(label="Zoomed Detected Image")
+    
+    with gr.Row():
+        zoom_slider_preprocessed = gr.Slider(
+            minimum=50, 
+            maximum=300, 
+            value=100, 
+            step=10, 
+            label="Zoom Preprocessed Image (%)",
+            info="Drag to zoom (50% to 300%)",
+            scale=1
+        )
+    
+    preprocessed_html = gr.HTML(label="Zoomed Preprocessed Image")
     
     # Auto-detect when image is uploaded
     input_image.change(