From 292d1d91af5d2f3120f4fe221c646e55bd623712 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 27 Mar 2026 07:54:47 +0100
Subject: [PATCH] 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         | 18 ++----------------
 app/templates/contacts_base.html | 15 ++++-----------
 2 files changed, 6 insertions(+), 27 deletions(-)

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