diff --git a/app/static/css/style.css b/app/static/css/style.css
index c8cf7e8..f6f9d36 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -2002,26 +2002,12 @@ emoji-picker {
     min-width: 150px;
 }
 
-/* Scrollable contacts lists */
-#pendingList {
-    max-height: 200px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-}
-
+/* Scrollable contacts lists - height managed by flexbox in contacts_base */
+#pendingList,
 #existingList {
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
-    max-height: calc(100vh - 400px);
-    min-height: 300px;
-}
-
-@media (max-width: 768px) {
-    #existingList {
-        max-height: calc(100vh - 450px);
-    }
 }
 
 #existingList::-webkit-scrollbar,
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index c34a22c..90fec75 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -99,21 +99,14 @@
             background-color: #ffc107;
         }
 
-        /* Scrollable contacts lists (overrides for standalone page) */
-        #pendingList {
-            height: calc(100vh - 280px);
-            overflow-y: auto;
-            overflow-x: hidden;
-            -webkit-overflow-scrolling: touch;
-            min-height: 300px;
-        }
-
+        /* Scrollable contacts lists - use flexbox to fill remaining space */
+        #pendingList,
         #existingList {
+            flex: 1 1 0;
+            min-height: 0;
             overflow-y: auto;
             overflow-x: hidden;
             -webkit-overflow-scrolling: touch;
-            height: calc(100vh - 260px);
-            min-height: 300px;
         }
 
         /* Full-screen lists for dedicated pages */