diff options
| -rw-r--r-- | internal/web/static/base.css | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/internal/web/static/base.css b/internal/web/static/base.css index b5f4f13..3b9ce52 100644 --- a/internal/web/static/base.css +++ b/internal/web/static/base.css @@ -284,6 +284,9 @@ a { .display-vertical { grid-template-columns: 1fr; } + /* Too narrow to keep the side cluster beside the controls: let it wrap + beneath them rather than squeeze both onto one cramped row. */ + #controls { flex-wrap: wrap; } } /* Settings form — a simple labeled column; themes own colour. */ @@ -304,12 +307,22 @@ a { * 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; } +/* The side cluster must stay in the top-right CORNER, on the same row as the + * left controls -- never wrap beneath them. So the bar itself does not wrap + * (nowrap); the left controls (.controls-main) absorb any tightness by wrapping + * their OWN items onto further lines (min-width:0 lets them shrink to do so), + * while the side cluster holds the top-right corner (align-items:flex-start). */ +#controls { align-items: flex-start; flex-wrap: nowrap; } .controls-main { display: flex; flex-wrap: wrap; align-items: center; - gap: var(--space-2); + /* Tighter column gap than the reader bar: this bar carries more items + (reader link, date-nav, four version boxes, parts, layout), and the + saved width lets the whole left cluster share one row with the pinned + top-right cluster at desktop width instead of wrapping a control down. */ + gap: var(--space-1) 0.7rem; + min-width: 0; } /* Utility cluster (nav links + downloads), pushed to the right of the controls |