fix(ui): Admin Home custom content card not responsive on small screens#38973
Open
sahillllllllll-bit wants to merge 8 commits into
Open
Conversation
Contributor
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📜 Recent review details⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
WalkthroughReplaced the CardControls button layout in CustomContentCard with a responsive flex Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
ggazzo
added
the
valid
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/meteor/client/views/home/cards/CustomContentCard.tsx (1)
67-97: Consider extracting repeated wrapper props to reduce duplication.The same
width/mbe/mieconditional pattern is repeated across multiple wrappers, which makes future spacing tweaks error-prone.♻️ Suggested refactor
+ const actionButtonWrapperProps = { + width: isMobile ? 'full' : 'auto', + mbe: isMobile ? 8 : 0, + mie: !isMobile ? 8 : 0, + } as const; + <CardControls> <Box display='flex' flexDirection={isMobile ? 'column' : 'row'} flexWrap='wrap' width='full'> - <Box width={isMobile ? 'full' : 'auto'} mbe={isMobile ? 8 : 0} mie={!isMobile ? 8 : 0}> + <Box {...actionButtonWrapperProps}> <Button medium width='full' onClick={() => router.navigate('/admin/settings/Layout')} title={t('Layout_Home_Page_Content')}> {t('Customize_Content')} </Button> </Box> - <Box width={isMobile ? 'full' : 'auto'} mbe={isMobile ? 8 : 0} mie={!isMobile ? 8 : 0}> + <Box {...actionButtonWrapperProps}> <Button medium width='full'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/views/home/cards/CustomContentCard.tsx` around lines 67 - 97, The three repeated Box wrappers use the same conditional width/mbe/mie props; extract those into a shared constant (e.g., const actionBoxProps = { width: isMobile ? 'full' : 'auto', mbe: isMobile ? 8 : 0, mie: !isMobile ? 8 : 0 }) and spread it into the Box components (Box {...actionBoxProps}) or create a small wrapper component (e.g., ActionBox) that accepts children and internally applies those props; update the two Boxes that currently use the pattern to use the extracted props and decide whether the third Box should also use the same props or a specific variant, then remove the duplicated conditional expressions in CustomContentCard.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/meteor/client/views/home/cards/CustomContentCard.tsx`:
- Around line 67-97: The three repeated Box wrappers use the same conditional
width/mbe/mie props; extract those into a shared constant (e.g., const
actionBoxProps = { width: isMobile ? 'full' : 'auto', mbe: isMobile ? 8 : 0,
mie: !isMobile ? 8 : 0 }) and spread it into the Box components (Box
{...actionBoxProps}) or create a small wrapper component (e.g., ActionBox) that
accepts children and internally applies those props; update the two Boxes that
currently use the pattern to use the extracted props and decide whether the
third Box should also use the same props or a specific variant, then remove the
duplicated conditional expressions in CustomContentCard.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/meteor/client/views/home/cards/CustomContentCard.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: 📦 Build Packages
- GitHub Check: cubic · AI code reviewer
- GitHub Check: CodeQL-Build
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
apps/meteor/client/views/home/cards/CustomContentCard.tsx
🧠 Learnings (1)
📚 Learning: 2025-11-17T15:07:13.273Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37398
File: packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx:357-363
Timestamp: 2025-11-17T15:07:13.273Z
Learning: In packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx, IconElement is a presentational, non-actionable element that does not require wrapping in AppIdProvider, similar to plain_text and mrkdwn renderers. Only actionable elements (those with actions, actionId, or interactive behavior) should be wrapped in AppIdProvider.
Applied to files:
apps/meteor/client/views/home/cards/CustomContentCard.tsx
🔇 Additional comments (2)
apps/meteor/client/views/home/cards/CustomContentCard.tsx (2)
5-15: Responsive layout hook integration looks clean.Importing and using
useLayout()here is straightforward and keeps the responsiveness concern local to the component.
66-98: The control layout update addresses small-screen usability well.The flex wrapping + full-width mobile button treatment is a solid fix for overflow/clipping in narrow viewports while keeping existing button logic intact.
Contributor
|
Caution Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted. Error details |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #38973 +/- ##
===========================================
- Coverage 70.75% 70.69% -0.07%
===========================================
Files 3191 3191
Lines 112968 112973 +5
Branches 20523 20492 -31
===========================================
- Hits 79928 79861 -67
- Misses 30997 31064 +67
- Partials 2043 2048 +5
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
Contributor
Author
|
@dougfabris please take a look at this , thankyou:) |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Proposed changes (including videos or screenshots)
This PR fixes a UI responsiveness issue on the Admin Home page.
The Custom HTML content card was not responsive on small viewport sizes. When the screen width was reduced (mobile view or narrow browser window), the action buttons inside the card overflowed and became partially hidden or unusable.
Fix:
The layout now uses Fuselage flex wrapping to allow buttons to naturally flow into multiple rows. Each button also has a minimum width to maintain visual consistency while preventing clipping.
This follows Rocket.Chat's responsive UI design pattern by relying on container resizing instead of device detection.
Issue(s)
Closes UI responsiveness issue on Admin Home custom content card.
Steps to test or reproduce
Rocket.ChatlocallyBefore
After
Further comments
This change does not affect logic or APIs.
Only layout behavior was adjusted using Fuselage responsive flex wrapping, which aligns with other admin dashboard cards.
Summary by CodeRabbit