From 33654206a05a10f6c7f04cedf50754307153743d Mon Sep 17 00:00:00 2001
From: NW <nw@softuniq.eu>
Date: Tue, 23 Jun 2026 13:21:04 +0100
Subject: [PATCH] fix: wallet page layout - sticky sidebar with scroll,
 full-width owner summary below

- Sidebar: sticky with height=100vh, search field, internal scroll for user list
- Owner Summary: full-width below user/wallet section, not inside right column
- Wallet main: normal flow scrolling, not fixed height
---
 src/admin/public/style.css | 15 ++++++++++---
 src/admin/views/wallets.js | 46 ++++++++++++++++++++------------------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/admin/public/style.css b/src/admin/public/style.css
index c7a8399..1cb511b 100644
--- a/src/admin/public/style.css
+++ b/src/admin/public/style.css
@@ -355,7 +355,7 @@ pre { font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-width
   padding: 0;
   position: sticky;
   top: 1rem;
-  max-height: calc(100vh - 2rem);
+  height: calc(100vh - 2rem);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -438,10 +438,19 @@ pre { font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-width
   min-width: 0;
 }
 
-.stats-section {
+.wallet-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.wallet-bottom {
   margin-top: 2rem;
-  border-top: 2px solid var(--border);
+}
+
+.stats-section {
   padding-top: 1.5rem;
+  border-top: 2px solid var(--border);
 }
 
 .stats-section h2 {
diff --git a/src/admin/views/wallets.js b/src/admin/views/wallets.js
index 8a33c8c..dae60c0 100644
--- a/src/admin/views/wallets.js
+++ b/src/admin/views/wallets.js
@@ -169,28 +169,30 @@ export function renderWalletLayout(users, selectedUser, wallets, stats, seedPhra
     </div>` : '';
 
   const content = `
-    <div class="wallet-layout">
-      <aside class="wallet-sidebar">
-        <div class="wallet-sidebar-header">
-          <h3>Users</h3>
-          <input type="text" id="user-search" placeholder="Search by name or ID..." class="wallet-search" autocomplete="off">
-        </div>
-        <div class="wallet-user-list" id="user-list">${userListHtml || '<p class="muted">No users</p>'}</div>
-      </aside>
-      <section class="wallet-main">
-        ${selectedUser ? `
-          <h2>${escapeHtml(selectedUser.username || 'User #' + selectedUser.id)}
-            <span class="muted" style="font-weight:normal;font-size:0.85rem;"> — ${selectedUser.telegram_id}</span>
-          </h2>
-          ${balanceCard}
-          <h3>Crypto Wallets (${wallets.length})</h3>
-          <table>
-            <thead><tr><th>Type</th><th>Address</th><th>Balance</th><th>Created</th></tr></thead>
-            <tbody>${walletRows}</tbody>
-          </table>
-        ` : '<p class="muted">Select a user to view wallets</p>'}
-        ${ownerSection}
-      </section>
+    <div class="wallet-page">
+      <div class="wallet-layout">
+        <aside class="wallet-sidebar">
+          <div class="wallet-sidebar-header">
+            <h3>Users</h3>
+            <input type="text" id="user-search" placeholder="Search by name or ID..." class="wallet-search" autocomplete="off">
+          </div>
+          <div class="wallet-user-list" id="user-list">${userListHtml || '<p class="muted">No users</p>'}</div>
+        </aside>
+        <section class="wallet-main">
+          ${selectedUser ? `
+            <h2>${escapeHtml(selectedUser.username || 'User #' + selectedUser.id)}
+              <span class="muted" style="font-weight:normal;font-size:0.85rem;"> — ${selectedUser.telegram_id}</span>
+            </h2>
+            ${balanceCard}
+            <h3>Crypto Wallets (${wallets.length})</h3>
+            <table>
+              <thead><tr><th>Type</th><th>Address</th><th>Balance</th><th>Created</th></tr></thead>
+              <tbody>${walletRows}</tbody>
+            </table>
+          ` : '<p class="muted">Select a user to view wallets</p>'}
+        </section>
+      </div>
+      ${ownerSection ? `<div class="wallet-bottom">${ownerSection}</div>` : ''}
     </div>
     <script>
     (function() {