fix(chat): icon click, disabled toggles, username layout (#7590, #7592, #7593) by JohnMcLear · Pull Request #7597 · ether/etherpad

JohnMcLear · 2026-04-23T19:07:47Z

Bundles three small chat-related bug fixes that all touch the same area of the editor window. Per review feedback.

Closes

Chat panel (bottom-right) content stacks vertically / layout broken #7590 — chat icon click sometimes did nothing (icon button click target was being eaten by the inner .buttonicon flex span after fix(a11y): dialog semantics, focus management, icon labels, html lang #7584)
Disable chat checkbox doesn't visually disable dependent 'Chat always on screen' control #7592 — "Chat always on screen" / "Show Chat and Users" rows didn't visibly disable when "Disable chat" was ticked, even though the underlying inputs were disabled
User Log out button overflows off-screen #7593 — partial: revert of the original width-cap fix (no Log out button visible in vanilla etherpad-lite, and the cap made the username field unnecessarily narrow)

Changes

src/static/css/pad/chat.css

Reset flex / pointer behaviour on #chaticon .buttonicon so the inner glyph span doesn't intercept clicks meant for the <button id="chaticon">. Preferred over weakening the global .buttonicon rule, which the toolbar relies on for icon centring.
Title-bar layout left as-is (the float-based original); a separate visual pass on #titlecross / #titlesticky positioning can come later.

src/static/js/chat.ts

chat.show() now clears any inline display: none on #chatbox before adding the .visible class. Without this, doing Disable Chat → Re-enable Chat → click chat icon left the chatbox hidden by the inline style that applyShowChat(false) had set via jQuery .hide().

src/static/skins/colibris/src/components/form.css

Drop the :checked qualifier from the disabled-toggle visual rule so unchecked-but-disabled toggles also dim. Fixes Disable chat checkbox doesn't visually disable dependent 'Chat always on screen' control #7592 in the colibris skin.

src/static/css/pad/popup.css

Generic baseline for non-colibris skins: greyed label colour and cursor: not-allowed on disabled checkbox/radio rows in popups.

src/static/skins/colibris/src/components/users.css

#myusernameform margin-left 35px → 10px to match the base CSS. The 35px value was sized for the chatAndUsers sticky layout but in the standalone Users popup it just opens a wide gap.

src/static/css/pad/popup_users.css

Reverts the width:75px cap on #myusernameform and the forced width: 100% / box-sizing: border-box on #myusernameedit from the original PR commit. Vanilla etherpad-lite has no Log out button to overlap, and the cap makes the field too small.

Test plan

Tested in browser with the colibris skin:

Chat panel (bottom-right) content stacks vertically / layout broken #7590 — clicking the corner chat icon opens the panel reliably; closing and re-opening still works
Disable chat checkbox doesn't visually disable dependent 'Chat always on screen' control #7592 — ticking "Disable chat" greys both the labels and the colibris toggle visuals (opacity .4); untick restores
disable → enable → click chat icon → chat panel appears (regression fix from chat.ts change)
User Log out button overflows off-screen #7593 — username input renders at its natural width; no Log out overlap regression in environments that don't have one

qodo-free-for-open-source-projects · 2026-04-23T19:07:59Z

Review Summary by Qodo

Fix username input overlapping Log out button in Users popup

🐞 Bug fix

Walkthroughs

Description

• Constrain username input form to fixed width preventing overflow
• Make input fill container with border-box sizing
• Prevent Log out button overlap in Users popup

Diagram

flowchart LR
  A["#myusernameform<br/>no width constraint"] -->|Add width: 75px| B["#myusernameform<br/>fixed 75px width"]
  C["#myusernameedit<br/>natural content width"] -->|Add width: 100%<br/>box-sizing: border-box| D["#myusernameedit<br/>fills container"]
  B --> E["Log out button<br/>visible and not overlapped"]
  D --> E

File Changes

1. src/static/css/pad/popup_users.css 🐞 Bug fix +9/-0

Constrain username input to prevent button overlap

• Added width: 75px constraint to #myusernameform to prevent overflow
• Added width: 100% and box-sizing: border-box to input#myusernameedit to keep input within
 container bounds
• Added explanatory comments documenting the fix for issue #7593

src/static/css/pad/popup_users.css

qodo-free-for-open-source-projects · 2026-04-23T19:08:00Z

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (1) 📎 Requirement gaps (0)

1. No regression test for #7593 📘 Rule violation ☼ Reliability

Description

This PR is a bug fix (Fixes #7593) but it adds no automated regression test that would fail if the
CSS fix is reverted. Without a test, the Log out button overlap/clipping issue can easily regress
unnoticed.

Code

src/static/css/pad/popup_users.css[R61-64]

+  /* Constrain the username input so the adjacent Log out button does not
+     get pushed off the Users popup — previously the input expanded to its
+     natural default width and overlapped the button. Fixes #7593. */
+  width: 75px;

Evidence

PR Compliance ID 2 requires each bug fix to include an automated regression test. The changed code
explicitly indicates a bug fix (Fixes #7593) but the PR diff only shows CSS changes and no
accompanying test addition or modification.

src/static/css/pad/popup_users.css[61-64]
Best Practice: Repository guidelines

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The PR fixes a UI regression (username input overlapping the Log out button) but does not add an automated regression test to prevent the bug from reappearing.

## Issue Context
The CSS change is marked as a bug fix (`Fixes #7593`). Per compliance, a regression test should fail if the fix is reverted and pass with the fix.

## Fix Focus Areas
- src/static/css/pad/popup_users.css[61-77]
- src/tests/frontend/specs/helper.js[1-120]
- src/tests/frontend/specs/[add new spec file to cover Users popup layout][1-200]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

2. Skin min-width defeats fix 🐞 Bug ≡ Correctness

Description

In the default Colibris skin, input#myusernameedit has min-width: 110px, so it can still overflow
the newly constrained 75px #myusernameform container, undermining the intent to prevent overlap with
adjacent controls (e.g., Log out). This can cause the same layout overflow in the default Etherpad
skin configuration.

Code

src/static/css/pad/popup_users.css[R61-65]

+  /* Constrain the username input so the adjacent Log out button does not
+     get pushed off the Users popup — previously the input expanded to its
+     natural default width and overlapped the button. Fixes #7593. */
+  width: 75px;
}

Evidence
The PR constrains #myusernameform to 75px and sets the input to width:100% with border-box sizing,
but the Colibris skin still applies min-width:110px to the same input, which will force it wider
than the 75px container. Etherpad loads the base pad.css and then the skin’s pad.css, and Etherpad
defaults skinName to 'colibris', so this conflict applies to the default UI.
src/static/css/pad/popup_users.css[59-78]
src/static/skins/colibris/src/components/users.css[28-40]
src/static/js/ace.ts[182-189]
src/node/utils/Settings.ts[966-970]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The base CSS now constrains `#myusernameform` to `75px`, but the default Colibris skin sets `input#myusernameedit { min-width: 110px; }`, which can force the input wider than its container and reintroduce overflow/overlap.

### Issue Context
Etherpad loads `../static/css/pad.css` and then `../static/skins/${skinName}/pad.css`, and `skinName` defaults to `colibris`. The Colibris users component CSS currently enforces a minimum input width.

### Fix Focus Areas
- src/static/skins/colibris/src/components/users.css[28-40]

### Suggested fix
In Colibris `users.css`, adjust the username input rule to allow shrinking within the constrained container (e.g., remove/reduce `min-width`, or set `min-width: 0; max-width: 100%; box-sizing: border-box;`), aligning it with the intent of the base fix.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

qodo-free-for-open-source-projects · 2026-04-23T19:11:36Z

+  /* Constrain the username input so the adjacent Log out button does not
+     get pushed off the Users popup — previously the input expanded to its
+     natural default width and overlapped the button. Fixes #7593. */
+  width: 75px;


1. No regression test for #7593 📘 Rule violation ☼ Reliability

This PR is a bug fix (Fixes #7593) but it adds no automated regression test that would fail if the CSS fix is reverted. Without a test, the Log out button overlap/clipping issue can easily regress unnoticed.

Agent Prompt

## Issue description The PR fixes a UI regression (username input overlapping the Log out button) but does not add an automated regression test to prevent the bug from reappearing. ## Issue Context The CSS change is marked as a bug fix (`Fixes #7593`). Per compliance, a regression test should fail if the fix is reverted and pass with the fix. ## Fix Focus Areas - src/static/css/pad/popup_users.css[61-77] - src/tests/frontend/specs/helper.js[1-120] - src/tests/frontend/specs/[add new spec file to cover Users popup layout][1-200]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

qodo-free-for-open-source-projects · 2026-04-23T19:11:36Z

+  /* Constrain the username input so the adjacent Log out button does not
+     get pushed off the Users popup — previously the input expanded to its
+     natural default width and overlapped the button. Fixes #7593. */
+  width: 75px;
 }


2. Skin min-width defeats fix 🐞 Bug ≡ Correctness

In the default Colibris skin, input#myusernameedit has min-width: 110px, so it can still overflow the newly constrained 75px #myusernameform container, undermining the intent to prevent overlap with adjacent controls (e.g., Log out). This can cause the same layout overflow in the default Etherpad skin configuration.

Agent Prompt

### Issue description The base CSS now constrains `#myusernameform` to `75px`, but the default Colibris skin sets `input#myusernameedit { min-width: 110px; }`, which can force the input wider than its container and reintroduce overflow/overlap. ### Issue Context Etherpad loads `../static/css/pad.css` and then `../static/skins/${skinName}/pad.css`, and `skinName` defaults to `colibris`. The Colibris users component CSS currently enforces a minimum input width. ### Fix Focus Areas - src/static/skins/colibris/src/components/users.css[28-40] ### Suggested fix In Colibris `users.css`, adjust the username input rule to allow shrinking within the constrained container (e.g., remove/reduce `min-width`, or set `min-width: 0; max-width: 100%; box-sizing: border-box;`), aligning it with the intent of the base fix.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Fixes ether#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.

…ther#7590) Two regressions from the ether#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>

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: ether#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>

The width:75px on #myusernameform and width:100%/box-sizing on #myusernameedit from a55436c 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>

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>

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 905294d and f37da9a and restore the pre-existing float-based layout. The chat panel ships with its original visuals; we'll revisit ether#7590 separately if needed. Keeps the chat-icon click fix from 905294d (#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>

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>

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. (ether#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 ether#7592 in the colibris skin. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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>

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

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>

JohnMcLear · 2026-04-26T08:42:44Z

waiting on reg tests to merge . eta 15 mins

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 (ether#7592 — checks input :disabled state and label opacity) change_user_name.spec.ts - #myusernameform has 10px left margin and is not width-capped (ether#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>

qodo-free-for-open-source-projects Bot reviewed Apr 23, 2026

View reviewed changes

JohnMcLear force-pushed the fix-7593-logout-overflow branch from d76c6c7 to a55436c Compare April 24, 2026 18:33

JohnMcLear and others added 7 commits April 26, 2026 08:56

JohnMcLear changed the title ~~fix(userlist): stop username input overlapping Log out button (#7593)~~ fix(chat): icon click, disabled toggles, username layout (#7590, #7592, #7593) Apr 26, 2026

JohnMcLear and others added 3 commits April 26, 2026 09:28

JohnMcLear merged commit cd79329 into ether:develop Apr 26, 2026
16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(chat): icon click, disabled toggles, username layout (#7590, #7592, #7593)#7597

fix(chat): icon click, disabled toggles, username layout (#7590, #7592, #7593)#7597
JohnMcLear merged 12 commits intoether:developfrom
JohnMcLear:fix-7593-logout-overflow

JohnMcLear commented Apr 23, 2026 •

edited

Loading

Uh oh!

qodo-free-for-open-source-projects Bot commented Apr 23, 2026

Uh oh!

qodo-free-for-open-source-projects Bot commented Apr 23, 2026 •

edited

Loading

Uh oh!

qodo-free-for-open-source-projects Bot Apr 23, 2026

Uh oh!

qodo-free-for-open-source-projects Bot Apr 23, 2026

Uh oh!

JohnMcLear commented Apr 26, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

JohnMcLear commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Closes

Changes

Test plan

Uh oh!

qodo-free-for-open-source-projects Bot commented Apr 23, 2026

Review Summary by Qodo

Walkthroughs

File Changes

Uh oh!

qodo-free-for-open-source-projects Bot commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review by Qodo

Uh oh!

qodo-free-for-open-source-projects Bot Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

qodo-free-for-open-source-projects Bot Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

JohnMcLear commented Apr 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

JohnMcLear commented Apr 23, 2026 •

edited

Loading

qodo-free-for-open-source-projects Bot commented Apr 23, 2026 •

edited

Loading

JohnMcLear commented Apr 26, 2026 •

edited

Loading