From 905294d5b32db2fe255ace3d6101f9873870421a Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Sun, 26 Apr 2026 08:56:11 +0100
Subject: [PATCH] fix(chat): bottom-align titlebar controls; restore chat icon
 click (#7590)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two regressions from the #7584 a11y refactor of the chat widget,
both pure-CSS fixes scoped to the chat panel.

1. Title bar — `<a>` → `<button>` for #titlecross/#titlesticky kept the
   `float: right` layout, but a `<button>`'s box is only as tall as its
   glyph, so the small `−` and `█` controls floated at the *top* of the
   44px title bar instead of sitting on the title's baseline as the
   anchors did. Switch #titlebar to a flex row with `align-items:
   flex-end`, give #titlelabel `flex: 1` to push the controls to the
   right edge, and use `order: 1/2` to keep the historical visual order
   `[█] [−]` (which `float: right` previously produced from reverse
   source order).

2. Chat-icon corner widget — `<div>` → `<button id="chaticon">` exposes
   the inner `<span class="buttonicon">` to the global `.buttonicon`
   rule's `display: flex; position: relative; align-items/justify-content:
   center;`. The existing override only reset `display`, leaving the
   span as a positioned flex item that, in some layouts, sat over the
   button's hit surface and swallowed clicks. Reset the remaining flex
   properties and add `pointer-events: none` so clicks always reach the
   `<button>`'s own click handler — preferred over weakening the global
   .buttonicon rule, which the toolbar relies on for icon centring.

Visual-only / behaviour-fix, no markup or JS changes.

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

diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css
index 91d7312a4..5d1f9c134 100644
--- a/src/static/css/pad/chat.css
+++ b/src/static/css/pad/chat.css
@@ -62,17 +62,29 @@
 #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. */
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
 }
 #titlebar #titlelabel {
   margin: 4px 0 0 4px;
-  display: inline;
   font-size: 1.4rem;
+  /* Take the remaining row width so the corner buttons are pushed to the
+     right edge (replaces the prior float-right layout). */
+  flex: 1;
 }
 #titlebar .stick-to-screen-btn,
 #titlebar .hide-reduce-btn {
   font-size: 25px;
   color: inherit;
-  float: right;
   text-align: right;
   text-decoration: none;
   cursor: pointer;
@@ -82,6 +94,12 @@
   font-family: inherit;
   line-height: 1;
 }
+/* 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; }
 #titlebar .stick-to-screen-btn {
   font-size: 10px;
   padding-top: 2px;
@@ -147,12 +165,22 @@
   color: inherit;
 }
 /* Scope: the inner .buttonicon span here is just a glyph holder. Its global
-   rule in icons.css applies `display: flex` which is fine for toolbar
-   <button class="buttonicon"> instances but breaks inline layout when
-   nested inside a button that's laying out label + glyph + counter on one
-   line. Keep the glyph inline for the chat-icon corner widget. */
+   rule in icons.css applies `display: flex; align-items: center;
+   justify-content: center; position: relative;` which is fine for toolbar
+   `<button class="buttonicon">` instances (where the class IS the button)
+   but breaks the chat-icon corner widget — here `.buttonicon` is on a
+   `<span>` *inside* the button, alongside two more inline `<span>`s for
+   the label and unread counter. Turning the middle span into a flex
+   container disrupts the inline row and, in some layouts, leaves it
+   sitting on top of the button's clickable surface so clicks never reach
+   the `<button>`'s own handler. Reset the flex behaviour and make the
+   span pointer-transparent so clicks always fall through to #chaticon. */
 #chaticon .buttonicon {
   display: inline;
+  align-items: initial;
+  justify-content: initial;
+  position: static;
+  pointer-events: none;
 }
 #chaticon:focus-visible {
   outline: 2px solid #0066cc;