From f37da9a6275342131fdf2eb962ebe09b256a553f Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Sun, 26 Apr 2026 09:13:12 +0100
Subject: [PATCH] fix(chat): keep titlesticky at top of title bar (#7590
 review)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous pass bottom-aligned both corner controls via
align-items: flex-end on #titlebar. That correctly placed the close
button (#titlecross) on the title's baseline, but it also dragged the
much smaller "stick to screen" button (#titlesticky) down to the same
baseline — visibly far below where it sat in the original layout.

Switch to per-control align-self so each lands where it should:
  - #titlesticky → align-self: flex-start  (top, where it always was)
  - #titlecross  → align-self: flex-end    (bottom, on the title's baseline)
  - #titlelabel  → align-self: center      (don't stretch the heading)

Drop align-items from #titlebar so the defaults don't override these.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/static/css/pad/chat.css | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css
index 5d1f9c134..9ad53639e 100644
--- a/src/static/css/pad/chat.css
+++ b/src/static/css/pad/chat.css
@@ -62,16 +62,14 @@
 #titlebar {
   font-weight: bold;
   padding: 5px;
-  /* Lay the label and corner controls on a single row and bottom-align
-     them. The controls were previously `float: right` `<a>` tags, so the
-     small minus/block glyphs sat at the *baseline* of the line and looked
-     anchored to the bottom of the title bar. After #7584 turned them into
-     `<button>`s the floats survived but the buttons render at the top of
-     the line (button content is centered in its own box, and the box is
-     only as tall as the glyph), leaving the controls floating above the
-     title text. Fixes #7590. */
+  /* Lay the label and corner controls on a single row. Replaces the prior
+     `float: right` layout so we can place each control on its own cross-
+     axis position (titlesticky at the top, titlecross at the bottom of
+     the title bar). After #7584 turned the corner controls from inline
+     `<a>` glyphs into `<button>`s, the float layout left them stacked at
+     the top of the line and the minus glyph no longer sat near the title
+     baseline. Fixes #7590. */
   display: flex;
-  align-items: flex-end;
   gap: 6px;
 }
 #titlebar #titlelabel {
@@ -80,6 +78,8 @@
   /* Take the remaining row width so the corner buttons are pushed to the
      right edge (replaces the prior float-right layout). */
   flex: 1;
+  /* Don't stretch the heading vertically; let it sit on its own baseline. */
+  align-self: center;
 }
 #titlebar .stick-to-screen-btn,
 #titlebar .hide-reduce-btn {
@@ -97,9 +97,12 @@
 /* Preserve the historical visual order [titlesticky] [titlecross] — when
    both controls were `float: right`, source order was reversed visually,
    so titlesticky sat to the left of titlecross. Restore that with `order`
-   so we don't have to renumber the markup. */
-#titlebar .stick-to-screen-btn { order: 1; }
-#titlebar .hide-reduce-btn { order: 2; }
+   so we don't have to renumber the markup. The cross-axis position differs
+   per control: titlesticky stays where it always sat (top of the bar),
+   titlecross drops to the bottom so its `−` glyph sits on the title's
+   baseline rather than floating above it. */
+#titlebar .stick-to-screen-btn { order: 1; align-self: flex-start; }
+#titlebar .hide-reduce-btn { order: 2; align-self: flex-end; }
 #titlebar .stick-to-screen-btn {
   font-size: 10px;
   padding-top: 2px;