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
This commit is contained in:
NW
2026-06-23 13:21:04 +01:00
parent 91d7a19f0c
commit 33654206a0
2 changed files with 36 additions and 25 deletions

View File

@@ -355,7 +355,7 @@ pre { font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-width
padding: 0; padding: 0;
position: sticky; position: sticky;
top: 1rem; top: 1rem;
max-height: calc(100vh - 2rem); height: calc(100vh - 2rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@@ -438,10 +438,19 @@ pre { font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-width
min-width: 0; min-width: 0;
} }
.stats-section { .wallet-page {
display: flex;
flex-direction: column;
min-height: 0;
}
.wallet-bottom {
margin-top: 2rem; margin-top: 2rem;
border-top: 2px solid var(--border); }
.stats-section {
padding-top: 1.5rem; padding-top: 1.5rem;
border-top: 2px solid var(--border);
} }
.stats-section h2 { .stats-section h2 {

View File

@@ -169,6 +169,7 @@ export function renderWalletLayout(users, selectedUser, wallets, stats, seedPhra
</div>` : ''; </div>` : '';
const content = ` const content = `
<div class="wallet-page">
<div class="wallet-layout"> <div class="wallet-layout">
<aside class="wallet-sidebar"> <aside class="wallet-sidebar">
<div class="wallet-sidebar-header"> <div class="wallet-sidebar-header">
@@ -189,9 +190,10 @@ export function renderWalletLayout(users, selectedUser, wallets, stats, seedPhra
<tbody>${walletRows}</tbody> <tbody>${walletRows}</tbody>
</table> </table>
` : '<p class="muted">Select a user to view wallets</p>'} ` : '<p class="muted">Select a user to view wallets</p>'}
${ownerSection}
</section> </section>
</div> </div>
${ownerSection ? `<div class="wallet-bottom">${ownerSection}</div>` : ''}
</div>
<script> <script>
(function() { (function() {
var search = document.getElementById('user-search'); var search = document.getElementById('user-search');