Update app.py

app.py

@@ -68,10 +68,13 @@ css = """
     padding: 0 32px !important;
 }
 
-.main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.gradio-container > .main {
+    gap: 0 !important;
+}
+
+.contain {
+    display: flex !important;
+    flex-direction: column !important;
 }
 
 .dark {
@@ -389,17 +392,44 @@ input[type="range"] {
     margin-right: auto;
 }
 
-/* Main Layout */
-.main-row {
+/* Main Layout - Force side by side */
+#main-row {
     max-width: 1800px;
     margin: 0 auto !important;
-    width: 100%;
+    width: 100% !important;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    gap: 32px !important;
+    align-items: flex-start !important;
 }
 
-.main-row > .column {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+#main-row.row {
+    flex-wrap: nowrap !important;
+}
+
+#input-col {
+    flex: 0 0 380px !important;
+    width: 380px !important;
+    min-width: 320px !important;
+    max-width: 420px !important;
+}
+
+#preview-col {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+}
+
+@media (max-width: 900px) {
+    #main-row {
+        flex-direction: column !important;
+    }
+    #input-col,
+    #preview-col {
+        flex: 1 1 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+    }
 }
 """
 
@@ -652,9 +682,9 @@ with gr.Blocks(css=css, head=head, theme=gr.themes.Base(primary_hue="indigo"), d
         </div>
     """)
     
-    with gr.Row(equal_height=True, elem_classes=["main-row"]):
+    with gr.Row(equal_height=False, elem_id="main-row"):
         # Left Panel — Input (span 1)
-        with gr.Column(scale=1, min_width=320):
+        with gr.Column(scale=1, min_width=320, elem_id="input-col"):
             
             # Image Upload
             image_prompt = gr.Image(
@@ -670,7 +700,7 @@ with gr.Blocks(css=css, head=head, theme=gr.themes.Base(primary_hue="indigo"), d
             generate_btn = gr.Button("Generate 3D", variant="primary", elem_classes=["primary-btn"], size="lg")
 
         # Right Panel — Preview (span 2)
-        with gr.Column(scale=2):
+        with gr.Column(scale=2, elem_id="preview-col"):
             with gr.Walkthrough(selected=0) as walkthrough:
                 with gr.Step("Preview", id=0):
                     preview_output = gr.HTML(empty_html, label="3D Preview", show_label=False)