You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix: home page custom content card overflows on narrow viewports - #42084
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.
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.
The custom content card renders three action buttons inside CardControls,
which is a flex container without flex-wrap in fuselage 0.88.0. On narrow
viewports the buttons stay on one line and overflow the card.
Group the buttons in a ButtonGroup with the wrap prop, which fuselage
already styles with flex-wrap: wrap, so they wrap inside the card.
The three admin controls now use a wrapping ButtonGroup; their conditions, labels, titles, and handlers remain unchanged. The changeset records a patch release and describes the overflow fix.
The change enables wrapping for the admin controls without changing their behavior. No actionable merge-blocking risk remains; narrow-viewport rendering was not tested.
Pre-merge checks: 5
Check name
Status
Explanation
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Title check
The title names the bug (home page custom content card overflowing on narrow viewports), and the changeset targets that exact bug. The raw summary says the change wraps the three admin controls in a B…
Linked Issues check
Issue #42083 requires the three action buttons in the home page custom content card to wrap onto multiple lines and stay inside the card on narrow viewports, without clipping or horizontal page scroll…
Out of Scope Changes check
The whole-PR diff against the merge base touches two files. CustomContentCard.tsx changes only the admin branch: it adds the ButtonGroup import, wraps the existing three Button elements in ButtonGroup…
Docstring Coverage
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Full details: Title check
Explanation
The title names the bug (home page custom content card overflowing on narrow viewports), and the changeset targets that exact bug. The raw summary says the change wraps the three admin controls in a ButtonGroup so they stay inside the card on narrow screens, and the linked issue #42083 asks for the same fix. The title names the main change and the affected component area, so it passes.
Full details: Linked Issues check
Explanation
Issue #42083 requires the three action buttons in the home page custom content card to wrap onto multiple lines and stay inside the card on narrow viewports, without clipping or horizontal page scroll. At the reviewed head, apps/meteor/client/views/home/cards/CustomContentCard.tsx wraps the three admin buttons (Customize_Content, Show/Hide On Workspace, Show Only This Content) in <ButtonGroup wrap>, imported from @rocket.chat/fuselage. The issue states that fuselage styles the wrap variant with flex-wrap: wrap, so the buttons can move to a second line inside the CardControls flex container. Button labels, conditions, titles, and handlers are unchanged. The issue does not request automated tests, and the only coding requirement is the wrapping behavior. The author's before and after measurements (card width 524px to 366px; last button right edge 504px to 343px) are reported in the PR description. I did not reproduce these measurements, and the fuselage stylesheet was not inspected directly. The layout outcome rests on the issue's stylesheet evidence and the author's measurements.
Full details: Out of Scope Changes check
Explanation
The whole-PR diff against the merge base touches two files. CustomContentCard.tsx changes only the admin branch: it adds the ButtonGroup import, wraps the existing three Button elements in ButtonGroup wrap, and re-indents them. The non-admin branches are unchanged. The second file is .changeset/home-custom-content-card-controls-wrap.md, a patch changeset describing this fix. This is a standard repository convention and is connected to the change. No unrelated behavior, refactoring, or other components are modified.
Full details: Docstring Coverage
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files.
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Errors were encountered while retrieving linked issues.
Errors: 1
JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.
Hi! I've signed the CLA, and the code changes are ready. Could someone approve the pending CI workflows and assign the appropriate milestone? Happy to make any changes if needed during review. Thanks!
develop renamed the buttons' medium prop to size='medium' and moved
useIsEnterprise into @rocket.chat/ui-client, so CardControls was rewritten
around those. Kept develop's version and reapplied the ButtonGroup wrapper
that lets the three actions wrap instead of overflowing.
This branch has not been deployed
No deployments
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
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.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
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 withoutflex-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.Both captured on the admin home page at 414 x 896, the iPhone X viewport. Measured from the rendered page:
This change wraps the three buttons in a
ButtonGroupwith thewrapprop. Fuselage already styles.rcx-button-group--wrapwithflex-wrap: wrap, so the buttons move onto a second line when the card is too narrow to fit them on one.ButtonGroupis what fuselage documents for "grouping buttons that semantically share a common action context", which describes these three. It also rendersrole="group", so the grouping is exposed to assistive technology.TagList.tsxandMarketplaceHeader.tsxalready 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-wrapon.rcx-card__controlsand 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, theButtonGrouphere remains correct and can be simplified later if maintainers prefer.Issue(s)
Closes #42083
Steps to test or reproduce
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
CustomContentCardchanges. The other branches render no controls, so they are unaffected. No unit or e2e test covers this component today.Summary by CodeRabbit