fix: home page custom content card overflows on narrow viewports by ayan-alam07 · Pull Request #42084 · RocketChat/Rocket.Chat

ayan-alam07 · 2026-09-09T18:02:09Z

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.

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.

dionisio-bot · 2026-09-09T18:02:14Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is missing the 'stat: QA assured' label
This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

changeset-bot · 2026-09-09T18:02:14Z

🦋 Changeset detected

Latest commit: e82540c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

CLAassistant · 2026-09-09T18:02:17Z

All committers have signed the CLA.

coderabbitai · 2026-09-09T18:02:41Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: c9798b99-3c69-4655-a4f2-f8f9abc2d357

📥 Commits

Reviewing files that changed from the base of the PR and between 45a2738 and e82540c.

📒 Files selected for processing (2)

.changeset/home-custom-content-card-controls-wrap.md
apps/meteor/client/views/home/cards/CustomContentCard.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📜 Recent review details

⏰ Context from checks skipped due to timeout. (1)

GitHub Check: cubic · AI code reviewer

🔇 Additional comments (2)

apps/meteor/client/views/home/cards/CustomContentCard.tsx (1)

1-1: LGTM!

Also applies to: 63-85

.changeset/home-custom-content-card-controls-wrap.md (1)

1-5: LGTM!

Walkthrough

The custom content card now wraps its three action buttons on narrow viewports. A changeset records a patch release for @rocket.chat/meteor.

Changes

Custom content card controls

Layer / File(s)	Summary
Wrapping custom content actions `apps/meteor/client/views/home/cards/CustomContentCard.tsx`, `.changeset/home-custom-content-card-controls-wrap.md`	The three card controls now use a wrapping `ButtonGroup`. Existing actions, labels, states, tooltips, and icons remain unchanged. The changeset records the patch release and fix.

Priority: ➖ Normal

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to e8254

The home-page custom-content action controls now wrap on narrow viewports, preventing horizontal card overflow without changing their behavior. No merge-blocking risk remains.

Suggested labels: type: bug

Suggested reviewers: dougfabris, juliaforesti, tassoevan

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: preventing horizontal overflow in the home page custom content card on narrow viewports.
Linked Issues check	✅ Passed	The changes satisfy issue `#42083` by grouping the three custom-content controls in a wrapping ButtonGroup. This allows the buttons to move to multiple rows and remain inside the card.
Out of Scope Changes check	✅ Passed	The changes are limited to the affected CustomContentCard controls and the related patch changeset. No unrelated code changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

cubic-dev-ai

No issues found across 2 files

_{Re-trigger cubic}

ayan-alam07 · 2026-09-10T09:30:07Z

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!

ayan-alam07 requested a review from a team as a code owner September 9, 2026 18:02

dionisio-bot Bot added the community label Sep 9, 2026

coderabbitai Bot added the type: bug label Sep 9, 2026

cubic-dev-ai Bot reviewed Sep 9, 2026

View reviewed changes

Navigation Menu

Uh oh!

fix: home page custom content card overflows on narrow viewports - #42084

fix: home page custom content card overflows on narrow viewports#42084
ayan-alam07 wants to merge 1 commit into
RocketChat:developfrom
ayan-alam07:fix/home-card-controls-mobile-overflow

ayan-alam07 commented Sep 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

dionisio-bot Bot commented Sep 9, 2026

Uh oh!

changeset-bot Bot commented Sep 9, 2026

Uh oh!

CLAassistant commented Sep 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 9, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai Bot left a comment

Uh oh!

ayan-alam07 commented Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ayan-alam07 commented Sep 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Uh oh!

dionisio-bot Bot commented Sep 9, 2026

Uh oh!

changeset-bot Bot commented Sep 9, 2026

🦋 Changeset detected

Uh oh!

CLAassistant commented Sep 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ayan-alam07 commented Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ayan-alam07 commented Sep 9, 2026 •

edited by coderabbitai Bot

Loading

CLAassistant commented Sep 9, 2026 •

edited

Loading

coderabbitai Bot commented Sep 9, 2026 •

edited

Loading