Mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2026-07-18 09:04:54 +00:00
Code Issues Projects Releases Wiki Activity

fix(chat): bottom-align titlebar controls; restore chat icon click (#7590)

Browse source 
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>
This commit is contained in:
John McLear 2026-04-26 08:56:11 +01:00
parent a55436ca03
commit 905294d5b3
1 changed files with 34 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/static/css/pad/chat.css
View file

@ -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;