fix: ui overflow issues in Create Group modal [WPB-22420]

[theham3d]

Summary

Hi team 👋

I recently came across an open position at Wire, and before applying, I wanted to get a better feel for the product and the codebase. I usually like to explore the app a bit and check out the website, so I did the same here.

While playing around with the app, I noticed two small UI issues in Create Group modal. The first one is in the header, it slightly overflows the modal body and causes a small visual glitch in the corner. The second one happens when we're showing list of users: the modal becomes scrollable, but the current styling creates some inconsistencies, with overlapping overflow areas and slightly awkward scrolling.

What I changed:

• Removed the wrapperCSS property from the modal component (which sets overflow: unset)
• Adjusted the modal body styling to improve scrolling behavior when the user list grows

From what I could tell and checked the history, wrapperCSS was originally introduced for FadingScrollbar, but in this case it doesn’t seem to add value, and removing it didn’t introduce any issues.

Result:

• More consistent and predictable scrolling behavior
• Cleaner UI in the modal when the list grows
• Fixed header overflow glitch

I’ve attached before/after screenshots for reference in below.

---

Security Checklist (required)

• External inputs are validated & sanitized on client and/or server where applicable.
• API responses are validated; unexpected shapes are handled safely (fallbacks or errors).
• No unsafe HTML is rendered; if unavoidable, sanitization is applied and documented where it happens.
• Injection risks (XSS/SQL/command) are prevented via safe APIs and/or escaping.

Accessibility (required)

• I have read and this PR upholds our Accessibility Best Practices.

Standards Acknowledgement (required)

• I have read and this PR upholds our Coding Standards and Tech Radar Choices.

---

Screenshots or demo (if the user interface changed)

Before:

After:

Notes for reviewers

• Trade-offs:
• Follow-ups (linked issues):
• Linked PRs (e.g. web-packages):

[CLAassistant]

All committers have signed the CLA.

[thisisamir98]

@theham3d could you fix the EOL issue here please?

[theham3d]

@thisisamir98 Sure

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[arjita-mitra]

removing wrapperCSS={{overflow: 'unset', overflowY: 'unset'}} is necessary because this was overriding overflow: hidden of the wrapper.

adding modal_body{ overflow: hidden} could be dropped because scrolling is handled inside .group-creation &__list which already has

height: 374px;
overflow-y: auto;

could you explain why we need .modal__body {overflow-y: hidden;} too?

[theham3d]

Thanks @arjita-mitra for the review 👍
Yeah, you’re right. From what I can see in the history, this was mainly introduced because of the FadingScrollbar component. It looks like that changed over time, and when you fixed the issue, this override was left behind.

As for your question, the main reason is that you’re already handling the height limit and overflow in .group-creation__list, like you mentioned. With the current setup, the active style on .modal__body ends up causing a double scroll. In reality, there’s only one scrollable area (the list), but the UI shows two scrollbars, which is just a visual glitch (I've atached a screenshot above). This override fixes that issue.

[arjita-mitra]

I couldn't reproduce the double scrollbar though. Please check the pipeline issues.