From 3e524bb0d2b8f379e760519a478c70298847852b Mon Sep 17 00:00:00 2001 From: MarekWo Date: Mon, 29 Dec 2025 12:34:35 +0100 Subject: [PATCH] refactor(ui): Optimize Contact Management layout for better space usage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Compact Manual Approval and Pending Contacts sections to give more space for Existing Contacts list, which is the primary focus. Changes to Manual Approval section: - Convert from full section to single-line compact control - Replace description text with tooltip icon (hover for info) - Reduce vertical space by ~70px Changes to Pending Contacts section: - Reduce header size from h5 to h6 - Compact empty state (1rem padding vs 3rem) - Reduce icon size (1.5rem vs 3rem) - Limit list height to 200px (was 600px) - Remove "Refresh" text from button (icon only) Changes to Existing Contacts section: - Dynamic height: calc(100vh - 400px) with 300px minimum - Adapts to viewport height automatically - On mobile: calc(100vh - 450px) for better fit - More contacts visible without scrolling Other improvements: - Initialize Bootstrap tooltips in contacts.js - Smaller fonts and margins throughout - Better vertical space distribution Result: ~150px more space for main contacts list on desktop, ~200px more on mobile. Tooltip provides same info without clutter. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- app/static/js/contacts.js | 6 ++ app/templates/contacts.html | 112 +++++++++++++++++++++++------------- 2 files changed, 79 insertions(+), 39 deletions(-) diff --git a/app/static/js/contacts.js b/app/static/js/contacts.js index 59a1b92..5789b66 100644 --- a/app/static/js/contacts.js +++ b/app/static/js/contacts.js @@ -26,6 +26,12 @@ let contactToDelete = null; document.addEventListener('DOMContentLoaded', () => { console.log('Contact Management UI initialized'); + // Initialize Bootstrap tooltips + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); + // Attach event listeners attachEventListeners(); diff --git a/app/templates/contacts.html b/app/templates/contacts.html index e27cb76..d2f133f 100644 --- a/app/templates/contacts.html +++ b/app/templates/contacts.html @@ -5,11 +5,25 @@ {% block extra_head %} {% endblock %} @@ -179,59 +221,51 @@ - -
-
- Manual Contact Approval -
-

- When enabled, new contacts must be manually approved before they can communicate with your node. -

- -
+ +
+
-
- - +
- -
-
-
+ +
+
+
Pending Contacts -
+
-