From 41f6b694b184a2b39fa56d0dfe3c9ffbf44edbc5 Mon Sep 17 00:00:00 2001
From: Lukasz Kasprzak <lukas@labunix.xyz>
Date: Wed, 29 Jul 2026 20:33:09 +0200
Subject: 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.
---
 internal/web/static/base.css | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

(limited to 'internal/web/static')

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
-- 
cgit v1.3