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;