From 606b3fe89f4d7b3b55e6560880401bdb068a5a11 Mon Sep 17 00:00:00 2001 From: Daniel Redetzke Date: Sun, 4 Oct 2026 16:36:30 +0300 Subject: [PATCH] Keep the sidebar in view on long pages Beside the page, the sidebar now stays in place while the page scrolls, so the account link and Sign out are always visible; it scrolls by itself in very short windows. On a phone it still stacks above the page. Also show the version with one 'v': release builds already start with it. --- app.css | 3 +++ app.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/app.css b/app.css index 5440b09..c0a5fc2 100644 --- a/app.css +++ b/app.css @@ -66,6 +66,9 @@ a.brand, a.brand:hover { color: #fff; text-decoration: none; } .side .avatar { width: 28px; height: 28px; border-radius: 50%; background: #3a3b41; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 600; color: #fff; } .side .footrow { display: flex; justify-content: space-between; padding: 10px 12px 0; } .main { flex: 999 1 560px; min-width: 0; padding: 32px 32px 56px; } +/* Beside the page (not stacked above it on a phone), the sidebar stays in + place while the page scrolls, so the account link is always visible. */ +@media (min-width: 800px) { .side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; } } .wrap { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } @media (max-width: 640px) { .main { padding: 20px 16px 40px; } } diff --git a/app.js b/app.js index ba5a6ab..841ac8e 100644 --- a/app.js +++ b/app.js @@ -518,7 +518,7 @@ h('span', null, h('strong', null, me.name), h('span', null, 'My account')))), h('div', { class: 'footrow' }, h('button', { type: 'button', onClick: logout }, 'Sign out'), - h('span', null, 'v' + me.version)))); + h('span', null, 'v' + me.version.replace(/^v/, ''))))); main = h('main', { class: 'main', id: 'main' }); app.replaceChildren(h('div', { class: 'shell' }, nav, main)); refreshSide();