Fix layout issue

app.py

@@ -732,21 +732,18 @@ def upscale_and_resize_for_display(image):
 
     return display_upscaled
 
-# Custom CSS to ensure images display at exactly the same size while preserving aspect ratio
+# Custom CSS to make images fill containers while preserving aspect ratio
 css = """
-.image-container {
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
-    min-height: 400px !important;
-    max-height: 500px !important;
-    width: 100% !important;
+/* Target only the image display area, not the whole component */
+.image-container [data-testid="image"] {
+    height: 500px !important;
+    min-height: 500px !important;
 }
+
+/* Make images fill their containers */
 .image-container img {
-    max-width: 100% !important;
-    max-height: 100% !important;
-    width: auto !important;
-    height: auto !important;
+    width: 500px !important;
+    height: 500px !important;
     object-fit: contain !important;
     object-position: center !important;
 }
@@ -762,7 +759,10 @@ with gr.Blocks(css=css, title="HAT Super-Resolution for Satellite Images") as if
                 type="pil",
                 label="Input Satellite Image",
                 elem_classes="image-container",
-                sources=["upload"]
+                sources=["upload"],
+                height=500,
+                width=500,
+                show_download_button=False
             )
 
         with gr.Column():
@@ -770,7 +770,10 @@ with gr.Blocks(css=css, title="HAT Super-Resolution for Satellite Images") as if
                 type="pil",
                 label="Enhanced Output (4x Super-Resolution)",
                 elem_classes="image-container",
-                interactive=False
+                interactive=False,
+                height=500,
+                width=500,
+                show_download_button=False
             )
 
     submit_btn = gr.Button("Enhance Image", variant="primary")