Update app.py

app.py

@@ -463,28 +463,65 @@ css = """
     margin: 0 auto !important;
     justify-content: center !important;
     gap: 8px !important;
-    min-height: 150px !important;  /* Added minimum height */
+    min-height: 150px !important;
 }
 .centered-examples .thumb {
     height: 100px !important;
     width: 100px !important;
     object-fit: cover !important;
-    margin: 5px !important;  /* Added margin between thumbs */
+    margin: 5px !important;
 }
-/* 1) Global override: remove any forced sizing on .fixed-height anywhere */
-.fixed-height.svelte-842rpi.svelte-842rpi {
-  min-height: 0        !important;  /* cancel the global min-height */ 
-  max-height: none     !important;  /* cancel the global max-height */ 
-  height: auto         !important;  /* allow auto height */ 
+
+/* Universal solution - targets any element with both fixed-height and svelte classes */
+[class*="fixed-height"][class*="svelte-"] {
+    min-height: 0 !important;
+    max-height: 200px !important;
+    height: auto !important;
+    overflow-y: auto !important;
+}
+
+/* More specific for grid-wrap containers */
+[class*="grid-wrap"][class*="svelte-"][class*="fixed-height"] {
+    min-height: 0 !important;
+    max-height: 200px !important;
+    height: auto !important;
+    overflow-y: auto !important;
 }
-/* 2) Same-query override: mirror Gradio’s media query exactly */
+
+/* Target gallery containers specifically */
+#my_media_gallery [class*="grid-wrap"] {
+    min-height: 0 !important;
+    max-height: 200px !important;
+    height: auto !important;
+    overflow-y: auto !important;
+}
+
+/* Media query version */
 @media (min-width: 1280px) {
-  /* target the exact same class chain inside the breakpoint */
-  .fixed-height.svelte-842rpi.svelte-842rpi {
-    min-height: 0      !important;  /* zero-out the 55vh/min-height there */ 
-    max-height: none   !important;  /* remove the viewport-height cap */ 
-    height: auto       !important;  /* let content dictate height */ 
-  }
+    [class*="fixed-height"][class*="svelte-"] {
+        min-height: 0 !important;
+        max-height: 200px !important;
+        height: auto !important;
+    }
+    
+    [class*="grid-wrap"][class*="svelte-"][class*="fixed-height"] {
+        min-height: 0 !important;
+        max-height: 200px !important;
+        height: auto !important;
+    }
+}
+
+/* Fallback with even higher specificity */
+div[class*="fixed-height"][class*="svelte-"]:not([style*="min-height"]) {
+    min-height: 0 !important;
+}
+
+/* Target the specific gallery by ID */
+#my_media_gallery div[class*="grid-wrap"] {
+    min-height: 0 !important;
+    max-height: 200px !important;
+    height: auto !important;
+    overflow-y: auto !important;
 }
 """