web: pin settings/download to the top-right corner, never wrap it down

Per the target layout: the utility cluster (settings + the pobierz
disclosure) must hold the top-right corner on the same row as the reader
link, not drop onto a second full-width line below the controls.

Make #controls itself non-wrapping so the side cluster keeps the corner;
the left controls (.controls-main) absorb any tightness by wrapping their
OWN items onto a further line (min-width:0 lets them shrink). At the
64rem page width the whole bar cannot fit every left control AND the
corner cluster on one line, so a trailing control (layout) wraps beneath
-- the intended block-on-the-left, cluster-in-the-corner shape. A tighter
column gap buys a little room; on phones (<=40rem) the bar wraps normally.

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