Update app.py

app.py

@@ -139,7 +139,7 @@ t2i_example_prompts = [
     ["A cute robot sitting at a desk, digital art style", 1024, 1024, 44],
 ]
 
-# --- Custom CSS (Kept from previous refined version) ---
+# --- Custom CSS (Modified to ensure Row behavior) ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
 
@@ -149,11 +149,17 @@ custom_css = """
 
 /* Ensure padding on all screen sizes */
 .gradio-container {
+    /* Retain max-width but remove side padding in Blocks for better full-width control */
     max-width: 1400px !important;
     margin: auto !important;
     padding: 0 16px; 
 }
 
+/* CSS Fix: Ensure layout elements behave as flex containers */
+.gr-row {
+    display: flex !important;
+}
+
 /* Background gradient for the overall app (like a subtle card) */
 #component-0 {
     background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
@@ -256,7 +262,8 @@ label {
 """
 
 # Build Gradio interface
-with gr.Blocks() as demo:
+# Added fill_width=True to Blocks to maximize space utilization
+with gr.Blocks(fill_width=True) as demo:
     gr.HTML("""
         <div style="text-align: center; padding: 40px 20px 30px 20px;">
             <h1 style="font-size: 48px; font-weight: 700; margin: 0; background: linear-gradient(90deg, #007aff 0%, #5856d6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
@@ -271,9 +278,11 @@ with gr.Blocks() as demo:
     with gr.Tabs(selected=0):
         # Image Edit Tab (Responsive Layout: Row on Desktop, Column on Mobile)
         with gr.TabItem("Edit Image", id=0):
-            with gr.Row(): # <-- This creates the responsive horizontal layout on wide screens
+            with gr.Row(): 
                 # Left Column (Inputs)
-                with gr.Column(scale=1, variant="panel"): # <-- This is the first pane (left side)
+                # Setting min_width=0 ensures the column will shrink freely on narrow viewports
+                # until Gradio's responsive behavior naturally stacks them.
+                with gr.Column(scale=1, min_width=0, variant="panel"): 
                     gr.Markdown("### 🖼️ Input Image & Controls")
                     input_image = gr.Image(
                         label="Upload Image",
@@ -302,7 +311,7 @@ with gr.Blocks() as demo:
                     edit_btn = gr.Button("Edit Image", variant="primary", size="lg", elem_classes=["primary-btn"])
 
                 # Right Column (Output)
-                with gr.Column(scale=1, variant="panel"): # <-- This is the second pane (right side)
+                with gr.Column(scale=1, min_width=0, variant="panel"):
                     gr.Markdown("### ✨ Result")
                     output_image = gr.Image(
                         label="Result",
@@ -325,9 +334,9 @@ with gr.Blocks() as demo:
 
         # Text-to-Image Tab (Responsive Layout: Row on Desktop, Column on Mobile)
         with gr.TabItem("Generate Image", id=1):
-            with gr.Row(): # <-- This creates the responsive horizontal layout on wide screens
+            with gr.Row(): 
                 # Left Column (Inputs)
-                with gr.Column(scale=1, variant="panel"):
+                with gr.Column(scale=1, min_width=0, variant="panel"):
                     gr.Markdown("### 🎨 Generation Controls")
                     t2i_prompt = gr.Textbox(
                         label="Describe your image",
@@ -364,7 +373,7 @@ with gr.Blocks() as demo:
                     generate_btn = gr.Button("Generate Image", variant="primary", size="lg", elem_classes=["primary-btn"])
 
                 # Right Column (Output)
-                with gr.Column(scale=1, variant="panel"):
+                with gr.Column(scale=1, min_width=0, variant="panel"):
                     gr.Markdown("### ✨ Result")
                     t2i_output = gr.Image(
                         label="Result",