From b80e7c34878cfff7800c5fd0c592a3475461aaa6 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Wed, 29 Jul 2026 14:04:17 -0400
Subject: [PATCH] =?UTF-8?q?fix(web5):=20connected-nodes=20list=20fills=20c?=
 =?UTF-8?q?ard=20height=20on=20xl=20=E2=80=94=20constant=20gap=20above=20f?=
 =?UTF-8?q?ooter=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three tab panes (Trusted/Observers/Requests) were hard-capped at
max-h-72 with an mt-auto footer, so a tall sibling Node Visibility card
stretched the shared xl grid row and opened a growing dead gap between
the list end and the Find Nodes / Refresh buttons. The panes are now the
flexible middle of the card's column flex (flex-auto min-h-0, cap lifted
at xl via xl:max-h-none) so the gap is always exactly the footer's pt-4;
below xl the max-h-72 cap and current sizing are unchanged. Footer gets
shrink-0 so buttons can never be compressed by a long list.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/views/web5/Web5ConnectedNodes.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/neode-ui/src/views/web5/Web5ConnectedNodes.vue b/neode-ui/src/views/web5/Web5ConnectedNodes.vue
index bdb64866..9663ad95 100644
--- a/neode-ui/src/views/web5/Web5ConnectedNodes.vue
+++ b/neode-ui/src/views/web5/Web5ConnectedNodes.vue
@@ -54,7 +54,7 @@
     </div>
 
     <!-- Trusted tab -->
-    <div v-show="nodesContainerTab === 'trusted'" class="space-y-2 max-h-72 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'trusted'" class="space-y-2 flex-auto min-h-0 overflow-y-auto max-h-72 xl:max-h-none">
       <div v-if="loadingPeers && peers.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>
@@ -87,7 +87,7 @@
     </div>
 
     <!-- Observers tab -->
-    <div v-show="nodesContainerTab === 'observers'" class="space-y-2 max-h-72 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'observers'" class="space-y-2 flex-auto min-h-0 overflow-y-auto max-h-72 xl:max-h-none">
       <div v-if="loadingPeers && observers.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>
@@ -117,7 +117,7 @@
     </div>
 
     <!-- Requests tab -->
-    <div v-show="nodesContainerTab === 'requests'" class="space-y-2 max-h-72 overflow-y-auto">
+    <div v-show="nodesContainerTab === 'requests'" class="space-y-2 flex-auto min-h-0 overflow-y-auto max-h-72 xl:max-h-none">
       <div v-if="loadingRequests && connectionRequests.length === 0" class="p-4 text-center text-white/60 text-sm">
         {{ t('common.loading') }}
       </div>
@@ -158,7 +158,7 @@
       </div>
     </div>
 
-    <div class="mt-auto pt-4 space-y-3">
+    <div class="mt-auto shrink-0 pt-4 space-y-3">
       <!-- Always the bottom 50/50 pair, every screen size — consistent with
            the other web5 cards' full-width bottom actions. -->
       <div class="grid grid-cols-2 gap-3">