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 (Modified to ensure Row behavior) ---
+# --- Custom CSS (Cleaned up for maximum layout flexibility) ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
 
@@ -147,20 +147,13 @@ custom_css = """
     font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
 
-/* Ensure padding on all screen sizes */
+/* Base styling relying on fill_width=True and Gradio's structure */
 .gradio-container {
-    /* Retain max-width but remove side padding in Blocks for better full-width control */
-    max-width: 1400px !important;
+    max-width: 100% !important; /* Allow full width */
     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) */
+/* Background gradient for the overall app */
 #component-0 {
     background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
 }
@@ -225,23 +218,6 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4) !important;
 }
 
-/* Slider and Label styling */
-.slider-container {
-    margin: 16px 0 !important;
-}
-
-label {
-    font-weight: 500 !important;
-    color: #1d1d1f !important;
-    margin-bottom: 8px !important;
-    font-size: 14px !important;
-}
-
-.secondary-text {
-    color: #86868b !important;
-    font-size: 13px !important;
-}
-
 /* Card Style (targets gr-panel when variant="panel" is used) */
 .card {
     background: white !important;
@@ -250,7 +226,7 @@ label {
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
 }
 
-/* Mobile adjustments */
+/* Mobile adjustments (retains padding) */
 @media (max-width: 768px) {
     .gradio-container {
         padding: 0 8px !important;
@@ -262,7 +238,7 @@ label {
 """
 
 # Build Gradio interface
-# Added fill_width=True to Blocks to maximize space utilization
+# Using fill_width=True on Blocks to maximize available horizontal space
 with gr.Blocks(fill_width=True) as demo:
     gr.HTML("""
         <div style="text-align: center; padding: 40px 20px 30px 20px;">
@@ -280,8 +256,6 @@ with gr.Blocks(fill_width=True) as demo:
         with gr.TabItem("Edit Image", id=0):
             with gr.Row(): 
                 # Left Column (Inputs)
-                # 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(