fix(userlist): stop username input overlapping Log out button (#7593)#7597
Open
JohnMcLear wants to merge 1 commit intoether:developfrom
Open
fix(userlist): stop username input overlapping Log out button (#7593)#7597JohnMcLear wants to merge 1 commit intoether:developfrom
JohnMcLear wants to merge 1 commit intoether:developfrom
Conversation
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.
Review Summary by QodoFix username input overlapping Log out button in Users popup
WalkthroughsDescription• 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 Diagramflowchart 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 Changes1. src/static/css/pad/popup_users.css
|
Code Review by Qodo
1. No regression test for #7593
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
Comment on lines
+61
to
+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; |
There was a problem hiding this comment.
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
Comment on lines
+61
to
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; | ||
| } |
There was a problem hiding this comment.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #7593.
In the pad's Users popup, `#myusernameform` had no width set and the `<input id="myusernameedit">` inside it rendered at its natural content width, pushing past the adjacent Log out button. At common viewport widths the button ended up overlapped or clipped off-screen.
Fix
CSS-only:
Result: the Log out button sits visibly next to the username input as intended.
Test plan