From b07ecd9d57793003a77da0e172016c9f44ef372d Mon Sep 17 00:00:00 2001 From: Lukasz Kasprzak Date: Wed, 29 Jul 2026 14:33:08 +0200 Subject: web: pin the utility cluster to the top-right of the controls bar Wrap the essential controls in a single .controls-main block that wraps internally, so reader/settings + downloads stay at the TOP-right instead of dropping to a second row. #controls (index only) becomes top-aligned; the reader's .controls form is untouched. --- internal/web/static/base.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'internal/web/static') diff --git a/internal/web/static/base.css b/internal/web/static/base.css index 2faabc5..3a240b2 100644 --- a/internal/web/static/base.css +++ b/internal/web/static/base.css @@ -293,8 +293,20 @@ a { .bookmark .tags { font-size: 0.85rem; } .tag-filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); font-family: var(--font-ui); } +/* Index top bar: the essential controls sit in one wrapping block on the left; + * the utility cluster is pinned to the TOP-right, so it stays up top even when + * the controls wrap onto a second line. (#controls is the index form only; the + * reader's .controls form keeps the plain single-row wrap.) */ +#controls { align-items: flex-start; } +.controls-main { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-2); +} + /* Utility cluster (nav links + downloads), pushed to the right of the controls - * bar; wraps beneath when the row is narrow. */ + * bar; wraps beneath when the window is too narrow to fit it up top. */ .controls-side { margin-left: auto; display: inline-flex; -- cgit v1.3