Update app.py

app.py

@@ -250,12 +250,13 @@ css = """
     .zip-button:hover { background-color: #1e88e5; }
     .status-box { border: 1px solid #ddd; background-color: #f9f9f9; padding: 10px; border-radius: 5px; }
     .input-group { border: 1px solid #ddd; padding: 15px; border-radius: 5px; background-color: #f0f0f0; }
-    .gallery-row { display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 10px; }
-    .image-container { position: relative; width: 150px; height: 150px; overflow: hidden; border-radius: 5px; }
+    .image-container { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 5px; }
     .image-container img { width: 100%; height: 100%; object-fit: cover; }
     .overlay { position: absolute; bottom: 5px; right: 5px; background-color: rgba(0, 0, 0, 0.6); padding: 5px; border-radius: 5px; display: flex; align-items: center; gap: 5px; color: white; font-size: 12px; }
     .overlay label { margin: 0; color: white; }
     .overlay input[type="checkbox"] { margin: 0; }
+    .gallery-row { display: flex; flex-wrap: wrap; gap: 10px; }
+    .gallery-column { flex: 1 1 calc(25% - 10px); min-width: 150px; }
 """
 
 with gr.Blocks(title="Stock Photo Downloader", css=css) as demo:
@@ -280,21 +281,23 @@ with gr.Blocks(title="Stock Photo Downloader", css=css) as demo:
     gr.Markdown("<p style='color: #666;'>Select images to include in your ZIP file.</p>")
     image_paths_state = gr.State()
 
-    # Pre-create all possible image and checkbox components, but keep them hidden initially
+    # Pre-create all possible image and checkbox components
     image_outputs = [gr.Image(label=f"Image {i+1}", show_label=False, visible=False, height=150, width=150) for i in range(TOTAL_IMAGES)]
     checkbox_outputs = [gr.Checkbox(label=f"Image {i+1}", value=False, visible=False, scale=0) for i in range(TOTAL_IMAGES)]
-    
-    # Dynamic gallery container with flexbox rows
+
+    # Dynamic gallery container with rows
     with gr.Column():
-        gallery_rows = [gr.Row(elem_classes=["gallery-row"], visible=False) for _ in range(MAX_ROWS)]
-        for row_idx, row in enumerate(gallery_rows):
-            with row:
+        gallery_rows = []
+        for row_idx in range(MAX_ROWS):
+            with gr.Row(elem_classes=["gallery-row"], visible=False) as row:
                 for col_idx in range(IMAGES_PER_ROW):
                     idx = row_idx * IMAGES_PER_ROW + col_idx
-                    with gr.Group(elem_classes=["image-container"]):
-                        image_outputs[idx]
-                        with gr.Row(elem_classes=["overlay"]):
-                            checkbox_outputs[idx]
+                    with gr.Column(elem_classes=["gallery-column"]):
+                        with gr.Group(elem_classes=["image-container"]):
+                            image_outputs[idx]
+                            with gr.Row(elem_classes=["overlay"]):
+                                checkbox_outputs[idx]
+            gallery_rows.append(row)
 
     gr.Markdown("### 📦 Create ZIP File")
     submit_button = gr.Button("Create ZIP of Selected Images", elem_classes=["zip-button"])
@@ -313,7 +316,7 @@ with gr.Blocks(title="Stock Photo Downloader", css=css) as demo:
             for i, chk in enumerate(checkbox_outs)
         ]
         row_updates = [
-            gr.Row(visible=(row_idx < (num_downloaded + IMAGES_PER_ROW - 1) // IMAGES_PER_ROW), elem_classes=["gallery-row"])
+            gr.Row(visible=(row_idx < (num_downloaded + IMAGES_PER_ROW - 1) // IMAGES_PER_ROW))
             for row_idx in range(MAX_ROWS)
         ]