fix(contacts): restore flexbox list height, remove calc() overrides

The contact list in Existing/Pending Contacts was not using all available
space due to calc(100vh - ...) and max-height rules overriding the
flexbox layout. Remove fixed height constraints from #pendingList and
#existingList in both contacts_base.html and style.css, letting the
flexbox chain (body > main > container > pageContent > list) fill the
remaining viewport space.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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,

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 */