From ab5fb131a3d27820f9d97e40bfa0161877631873 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();