* fix(userlist): stop username input from overlapping the Log out button
Fixes#7593. In the pad's Users popup, #myusernameform had no width
set and the <input id="myusernameedit"> inside it took its natural
content width, pushing past the Log out button and making the button
overflow the popup at common widths.
Constrain #myusernameform to 75px and make the input fill its
container with box-sizing: border-box so the text field stays inside
the form and the Log out button sits visibly next to it rather than
getting covered or clipped off-screen.
Low-risk, CSS-only change. No test plan beyond visual verification
because the affected control is in the users popup UI.
* fix(chat): bottom-align titlebar controls; restore chat icon click (#7590)
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>
* fix(settings): grey disabled chat option labels (#7592)
When "Disable chat" is ticked in the Settings dialog, refreshMyViewControls()
already sets `disabled` on `#options-stickychat` and `#options-chatandusers`,
but the browser only greys the checkbox itself — the adjacent `<label>`
keeps its normal colour, so the row still looks interactive even though
clicks are no-ops.
Add a popup-scoped rule that follows the existing convention used for
disabled `.nice-select` controls (`color: #999; cursor: not-allowed`) so
any disabled checkbox or radio in a settings popup matches its label to
the disabled state.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* revert(userlist): drop username input width cap (#7593 review)
The width:75px on #myusernameform and width:100%/box-sizing on
#myusernameedit from a55436ca0 were guarding against an overlap with
a "Log out" button — but no Log out button exists in vanilla
etherpad-lite (the original report came from a setup with a plugin
that adds one). Without that button visible, the cap just makes the
default username field unnecessarily narrow.
Restore #myusernameform to just `margin-left: 10px` and drop the
forced width on the input. If the overlap reappears in a real plugin
setup it should be re-fixed there (or with a more targeted rule that
only kicks in when a logout button is actually present).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(chat): keep titlesticky at top of title bar (#7590 review)
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>
* revert(chat): restore original #titlebar layout (#7590 review)
Both attempted CSS layouts for the title bar (full flex with
align-items: flex-end, then per-control align-self) ended up looking
worse than the original in review. Drop all the #titlebar / #titlelabel
/ #titlecross / #titlesticky changes from 905294d5b and f37da9a62 and
restore the pre-existing float-based layout. The chat panel ships with
its original visuals; we'll revisit #7590 separately if needed.
Keeps the chat-icon click fix from 905294d5b (#chaticon .buttonicon
flex/pointer-events reset) and the focus-visible additions for the
title-bar buttons.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(chat): clear inline display:none in chat.show()
When the user disables chat in settings, applyShowChat(false) calls
\`$('#chatbox').hide()\` which sets the chatbox's inline display to
\`none\`. Re-enabling chat doesn't undo that — it only re-shows the
icon. Then clicking the icon runs chat.show(), which adds the
\`.visible\` class but only flips visibility, not display, so the
chatbox stays hidden by the lingering inline style and the chat
appears not to open.
Clear the inline display in chat.show() before adding the .visible
class so the box becomes visible regardless of how it got hidden.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(colibris): align username gap; grey unchecked-disabled toggles
users.css: change #myusernameform margin-left from 35px to 10px to
match the base popup_users.css. The 35px value was chosen for the
sticky chatAndUsers layout, but for the standalone Users popup it
opens an unnecessarily wide gap between the colour swatch and the
username field. (#7593 review)
form.css: drop the \`:checked\` qualifier from the disabled toggle
visual rule so unchecked-but-disabled toggles also dim. Without this,
"Chat always on screen" / "Show Chat and Users" stayed fully bright
when "Disable chat" was ticked even though the underlying inputs were
disabled. Fixes#7592 in the colibris skin.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(chat): simple flex titlebar — CHAT _ []
Single flex row, vertically centred via align-items: center. Title
takes the remaining width with flex: 1; the two corner controls fall
in at the right edge in source order (titlecross then titlesticky),
giving the intended visual: minus on the left, sticky on the right.
Drops `float: right` from the controls, `display: inline` from the
heading, and the prior `padding-top: 2px` hack on titlesticky (flex
alignment handles the vertical position now).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(chat): titlebar uses underscore for minimize; symmetric padding
- Replace \`−\` with \`_\` in #titlecross. The minus glyph sits at
the centre of its em-box and read as a hyphen mid-row when the row
was vertically centred; \`_\` sits at the bottom of its em-box and
reads as a proper minimize indicator.
- Even out #titlebar horizontal padding to 9px and drop the asymmetric
\`margin-left: 4px\` on #titlelabel so CHAT on the left and the
sticky button on the right are the same distance from the bar's
edges.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(chat): lift #titlecross underscore 5px
The \`_\` glyph renders at the bottom of its em-box, so even with the
title bar's flex \`align-items: center\` it sits noticeably below the
CHAT baseline. Lift it with \`transform: translateY(-5px)\` (doesn't
affect flex layout calculations) so the underscore reads at roughly
the same vertical line as the title.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* test(chat): cover #7590 / #7592 / #7593 fixes
Adds Playwright frontend specs for the changes in this PR:
chat.spec.ts
- chat icon click reveals chatbox after disable→enable cycle
(regression: chat.show() must clear inline display:none)
- title bar lays out as a centred flex row with underscore minimize
(covers display, align-items, label flex:1, no float, translateY
lift, and visual padding symmetry via rendered geometry)
- chat icon click reliably opens the chat box (#chaticon .buttonicon
pointer/flex reset)
pad_settings.spec.ts
- disabling chat disables and visually greys the dependent chat
toggles (#7592 — checks input :disabled state and label opacity)
change_user_name.spec.ts
- #myusernameform has 10px left margin and is not width-capped
(#7593 review — colibris margin alignment, no input width cap)
Padding symmetry asserted via rendered rect deltas rather than the
CSS literal, since colibris ships its own #titlebar padding override.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
cd793294c4