fix: home page custom content card overflows on narrow viewports
Proposed changes (including videos or screenshots)
The custom content card on the home page renders three action buttons inside CardControls. That container is a flex row without flex-wrap, so on narrow viewports the buttons stay on one line, the card stretches past the edge of the screen, and the third button is cut off.
| Before | After |
|---|---|
 |  |
Both captured on the admin home page at 414 x 896, the iPhone X viewport. Measured from the rendered page:
- Before: the card is 524px wide inside a 414px viewport, the controls sit on one 32px row, and the last button's right edge lands at 504px.
- After: the card is 366px wide, the controls wrap onto two rows totalling 72px, and the last button's right edge lands at 343px.
This change wraps the three buttons in a ButtonGroup with the wrap prop. Fuselage already styles .rcx-button-group--wrap with flex-wrap: wrap, so the buttons move onto a second line when the card is too narrow to fit them on one.
ButtonGroup is what fuselage documents for "grouping buttons that semantically share a common action context", which describes these three. It also renders role="group", so the grouping is exposed to assistive technology. TagList.tsx and MarketplaceHeader.tsx already use the same prop.
I fixed this on the app side because the root cause is in fuselage and has not been released. RocketChat/fuselage#1440 tracks the missing flex-wrap on .rcx-card__controls and RocketChat/fuselage#2074 proposes adding it. Both are open, and 0.88.0, the version this repository depends on, does not contain the fix. If that PR lands, the ButtonGroup here remains correct and can be simplified later if maintainers prefer.
Issue(s)
Closes #42083
Steps to test or reproduce
- Sign in as a user with the admin role.
- Open the home page.
- Open browser devtools and switch to a mobile viewport, for example iPhone X at 414 x 896.
- Scroll to the custom content card at the end of the card group.
Before this change the third button is clipped at the edge of the screen. After it the buttons wrap onto a second line and stay inside the card.
Further comments
Only the admin branch of CustomContentCard changes. The other branches render no controls, so they are unaffected. No unit or e2e test covers this component today.
Summary by CodeRabbit
- Bug Fixes
- Fixed horizontal overflow of custom content cards on narrow screens.
- Custom content action buttons now wrap onto multiple lines when needed, keeping the controls within the card’s available width on smaller viewports. The controls retain their existing labels and behavior while adapting their layout to fit. This improves the card’s presentation across screen sizes without changing its available actions.