lfg2025/archy
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases 63 Wiki Activity

fix(web5): connected-nodes list fills card height on xl — constant gap above footer buttons

Browse Source 
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>
This commit is contained in:
archipelago 2026-07-29 14:04:17 -04:00
parent b8243000e9
commit b80e7c3487
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
neode-ui/src/views/web5/Web5ConnectedNodes.vue
View File

@ -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">