fix: constrain input-card height to match preview-card with scrolling enabled

- Update flex property from '1' to '1 1 auto' for proper flex-basis
- Add max-height: 800px constraint matching preview-card
- Replace 'overflow: visible' with 'overflow-y: auto' and 'overflow-x: hidden'
- Add min-height: 0 to prevent flex child overflow
- Add box-sizing: border-box for consistent padding calculation
- Add matching custom scrollbar styling for webkit and Firefox browsers
- Ensures symmetric layout and consistent user experience between columns

app.py

@@ -1229,13 +1229,42 @@ def create_interface() -> gr.Blocks:
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 0;
-        flex: 1 !important;
+        flex: 1 1 auto !important;
         display: flex !important;
         flex-direction: column !important;
-        overflow: visible !important;
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        max-height: 800px !important;
+        min-height: 0;
+        box-sizing: border-box !important;
         gap: 0 !important;
     }
 
+    /* Custom scrollbar for input card */
+    .input-card::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .input-card::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+    }
+
+    .input-card::-webkit-scrollbar-thumb {
+        background: rgba(4, 140, 252, 0.3);
+        border-radius: 4px;
+    }
+
+    .input-card::-webkit-scrollbar-thumb:hover {
+        background: rgba(4, 140, 252, 0.5);
+    }
+
+    /* Firefox scrollbar */
+    .input-card {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(4, 140, 252, 0.3) rgba(255, 255, 255, 0.05);
+    }
+
     .examples-header {
         margin-bottom: 0.75rem;
         padding-top: 1.5rem;