From e106b5493b83c8d6286dbcb816793a23690083d4 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 20 Mar 2026 12:55:33 +0100
Subject: [PATCH] fix(contacts): dynamic list height and tighter card spacing

- Replace fixed calc() heights with flexbox layout so the contact list
  fills all remaining viewport space on any screen size
- Make body/main/container chain flex columns so the list can grow
- Reduce vertical spacing between contact name, public key, and
  last advert rows for more compact cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/templates/contacts_base.html | 48 ++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index 239d80b..011f4cc 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -61,7 +61,7 @@
             font-size: 1.1rem;
             font-weight: 600;
             color: #212529;
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.1rem;
             word-wrap: break-word;
         }
 
@@ -70,7 +70,7 @@
             font-size: 0.85rem;
             color: #6c757d;
             word-break: break-all;
-            margin-bottom: 0.75rem;
+            margin-bottom: 0.15rem;
         }
 
         .contact-key.clickable-key {
@@ -295,9 +295,10 @@
             margin-bottom: 0.75rem;
         }
 
-        /* NEW: Full-screen lists for dedicated pages */
+        /* NEW: Full-screen lists for dedicated pages - fill remaining space */
         .contacts-list-fullscreen {
-            height: calc(100vh - 240px);
+            flex: 1 1 0;
+            min-height: 0;
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
             padding: 0;
@@ -374,25 +375,42 @@
         /* Override global overflow: hidden from style.css for Contact Management pages */
         html, body {
             overflow: auto !important;
+            height: 100%;
+        }
+
+        body {
+            display: flex;
+            flex-direction: column;
         }
 
         main {
             overflow: auto !important;
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+        }
+
+        main > .container-fluid,
+        main > .container-fluid > .row,
+        main > .container-fluid > .row > .col-12 {
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Page content containers should fill available space */
+        #pendingPageContent,
+        #existingPageContent {
+            flex: 1 1 0;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
         }
 
         /* Mobile responsiveness */
         @media (max-width: 768px) {
-            #existingList {
-                height: calc(100vh - 300px);
-            }
-
-            #pendingList {
-                height: calc(100vh - 320px);
-            }
-
-            .contacts-list-fullscreen {
-                height: calc(100vh - 300px);
-            }
         }
     </style>