Update app.py

app.py

@@ -178,6 +178,7 @@ def get_custom_css():
         gap: 25px;
         width: 100%;
         margin-bottom: 25px;
+        height: 80vh;
     }
     
     .upload-section {
@@ -189,6 +190,8 @@ def get_custom_css():
     
     .result-section {
         flex: 1.2;
+        display: flex;
+        flex-direction: column;
     }
     
     .upload-images-row {
@@ -220,7 +223,7 @@ def get_custom_css():
         background: var(--button-primary-background-fill-hover) !important;
     }
     
-    /* Result container styling */
+    /* Result container styling with scroll */
     .result-container {
         background: var(--background-fill-primary);
         padding: 8px;
@@ -228,11 +231,36 @@ def get_custom_css():
         margin-top: 0;
         width: 100%;
         text-align: center;
-        height: fit-content;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
     
     .result-content {
         width: 100%;
+        flex: 1;
+        overflow-y: auto;
+        max-height: 100%;
+    }
+    
+    /* Scrollbar styling for result content */
+    .result-content::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    .result-content::-webkit-scrollbar-track {
+        background: var(--background-fill-secondary);
+        border-radius: 4px;
+    }
+    
+    .result-content::-webkit-scrollbar-thumb {
+        background: var(--border-color-primary);
+        border-radius: 4px;
+    }
+    
+    .result-content::-webkit-scrollbar-thumb:hover {
+        background: var(--body-text-color);
+        opacity: 0.7;
     }
     
     /* Detection cards */
@@ -283,7 +311,11 @@ def get_custom_css():
         margin-top: 8px;
     }
     
-    /* Matching table - NEW STYLING */
+    /* Matching table - NEW STYLING with scroll support */
+    .matching-section {
+        width: 100%;
+    }
+    
     .matches-table {
         display: flex;
         justify-content: center;
@@ -307,6 +339,9 @@ def get_custom_css():
         font-size: 1em !important;
         font-weight: 700;
         border-bottom: 2px solid var(--border-color-primary);
+        position: sticky;
+        top: 0;
+        z-index: 10;
     }
     
     .matches-table td {
@@ -392,6 +427,19 @@ def get_custom_css():
         opacity: 0.9;
         font-size: 1.1em !important;
     }
+    
+    /* Ensure the HTML output container has proper scroll */
+    .gr-html {
+        height: 100% !important;
+        max-height: 100% !important;
+        overflow: hidden !important;
+    }
+    
+    .gr-html > div {
+        height: 100% !important;
+        max-height: 100% !important;
+        overflow: hidden !important;
+    }
     """
 
 # Create Gradio interface
@@ -441,7 +489,6 @@ with gr.Blocks(
                             ],
                             inputs=im_match_in2,
                             label="Second Image Examples",
-                            examples_per_page=4
                         )
                 
                 btn_f_match = gr.Button(