Home page custom content card overflows horizontally on narrow viewports

Description:

The custom content card on the home page overflows horizontally on narrow viewports. The card holds three action buttons inside a CardControls container that cannot wrap, so the last button is clipped at the card edge and the page scrolls sideways.

CardControls renders a div.rcx-card__controls. In @rocket.chat/fuselage 0.88.0 the shipped stylesheet styles that class as:

.rcx-card__controls,.rcx-card__header,.rcx-card__row,.rcx-card__title{display:flex;align-items:center}
.rcx-card__controls,.rcx-card__header,.rcx-card__row,.rcx-card__title{gap:.5rem}

There is no flex-wrap rule. Searching fuselage.css for flex-wrap returns it only on .rcx-button-group--wrap, .rcx-card__horizontal--wrap and .rcx-card-group--wrap, so the buttons stay on one line at any width.

This is the only card on the home page that hits the problem. It has three buttons where the others have one or two, and it stretches to the full width of the surrounding CardGroup while the other cards set width='x340'.

The markup is in apps/meteor/client/views/home/cards/CustomContentCard.tsx, lines 62 to 84.

Related upstream work: RocketChat/fuselage#1440 reports the same problem on CardControls, and RocketChat/fuselage#2074 proposes adding flex-wrap: wrap to the component stylesheet. Both are open. Version 0.88.0 is the current published release and the one this repository depends on, and it does not contain the fix.

Steps to reproduce:

1. Sign in as a user with the admin role.
2. Open the home page.
3. Open browser devtools and switch to a mobile viewport, for example iPhone X at 414 x 896.
4. Scroll to the custom content card at the end of the card group.

Expected behavior:

The buttons wrap onto more than one line and stay inside the card.

Actual behavior:

The buttons stay on a single line. "Show only this content" is clipped at the card boundary and the page scrolls horizontally.

Server Setup Information:

• Version of Rocket.Chat Server: 8.9.0-develop (commit 72b183dcfe)
• License Type: Community
• Number of Users: 1, local development instance
• Operating System: macOS
• Deployment Method: source, run through Meteor
• Number of Running Instances: 1
• DB Replicaset Oplog: n/a
• NodeJS Version: 22.22.3
• MongoDB Version: n/a

Client Setup Information

• Desktop App or Browser Version: Chrome with the device toolbar set to iPhone X, 414 x 896
• Operating System: macOS

Additional context

ButtonGroup already accepts a wrap prop that fuselage styles with flex-wrap: wrap, so the app side can be fixed without waiting for a fuselage release. TagList.tsx and MarketplaceHeader.tsx already use that prop.

Start with apps/meteor/client/views/home/cards/CustomContentCard.tsx, lines 62 to 84, and compare the ButtonGroup usage in TagList.tsx and MarketplaceHeader.tsx. Reproduce the card at a 414 x 896 viewport and verify the controls remain inside the card. Done means the three buttons wrap without horizontal page scrolling.