MrSphay/odysseus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anchor Settings window to top to stop layout shift between tabs

Browse Source 
The Settings window inherited the base `.modal` vertical centering
(`align-items:center`). Its height is content-driven, so every tab is a
different height — and a vertically centered window grows and shrinks
around its own midpoint, making the in-modal nav rail (and the whole
window) appear to jump vertically when switching between pages.

Top-anchor the Settings window on desktop (`align-items:flex-start` plus
a fixed `margin-top`) so the top edge stays put and the panel only ever
grows downward. Scoped to desktop only — on mobile the panel is a
full-height bottom sheet that is already stable. Opening and dragging the
window both clear the inline margin/top, so window placement is otherwise
unchanged.

Fixes #208
This commit is contained in:
Zeus-Deus
2026-06-01 17:50:19 +02:00
parent 70a71f603c
commit 62c60fc484
1 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/style.css
View File

@@ -20110,6 +20110,22 @@ body.gallery-selecting .gallery-dl-btn,
container-name: settings-modal;
}
/* Issue #208 — anchor the Settings window to the TOP of the chat area instead
of vertically centering it. The base .modal uses `align-items:center`, so a
centered window grows and shrinks around its own midpoint when you switch
between tabs whose content differs in height (Add Models vs. Shortcuts,
etc.). That makes the in-modal nav rail — and the whole window — appear to
jump up and down between pages. Pinning the top edge keeps the nav rail and
surrounding layout visually stable; the panel only ever grows downward.
Desktop only: on mobile the panel is a full-height bottom sheet that is
already top-stable, and a margin there would push it past the viewport. The
drag/dock code clears this margin (sets inline margin:0) the moment a window
is dragged, so moving the window still works exactly as before. */
@media (min-width: 769px) {
#settings-modal { align-items: flex-start; }
#settings-modal .settings-modal-content { margin-top: 7vh; }
}
.settings-modal-content .modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);