Update app.py

app.py

@@ -125,9 +125,27 @@ css = """
     object-fit: cover !important;
     margin: 5px !important;  /* Added margin between thumbs */
 }
+
+/* 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 */ 
+}
+
+/* 2) Same-query override: mirror Gradio’s media query exactly */
+@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 Labels
 classes = [
     'antelope', 'buffalo', 'chimpanzee', 'cow', 'deer', 'dolphin',
@@ -192,8 +210,8 @@ with gr.Blocks(title="Animal Classifier", css=css) as demo:
         examples_gallery = gr.Gallery(
             value=example_images,
             label="Example Images (Click to Select)",
-            columns=7,
-            height=244,
+            columns=7,        
+            elem_id="my_media_gallery",
             allow_preview=False,
             elem_classes=["centered-examples"]
         )