fix: avatar resize issue in users directory table#38538
fix: avatar resize issue in users directory table#38538Khizarshah01 wants to merge 2 commits intoRocketChat:developfrom
Conversation
|
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 |
|
|
No actionable comments were generated in the recent review. 🎉 📜 Recent review detailsConfiguration 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)
⏰ 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). (2)
WalkthroughThe UsersTableRow layout was refactored to replace nested Flex containers with a single Box-based flex wrapper; the text container now has explicit flexGrow/flexShrink/flexBasis to prevent avatar resizing, and the Bio MarkdownText was relocated as a sibling while preserving interaction handlers. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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}
|
Hi team 👋 |
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
from
a15faef to
b4f84fc
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)
37-38: Spurious{' '}expressions are no-ops inside a flex container.Both
{' '}expressions produce React text nodes that are treated as zero-width anonymous flex items — they have no visual effect indisplay='flex'context. They appear to be copy-paste artifacts and can be safely removed.♻️ Proposed cleanup
<Box fontScale='p2m' withTruncatedText> {name || username} {nickname && ` (${nickname})`} - </Box>{' '} - <Box mi={4} />{' '} + </Box> + <Box mi={4} /> <Box fontScale='p2' color='hint' withTruncatedText>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx` around lines 37 - 38, Remove the spurious React text nodes `{' '}` in UsersTableRow.tsx that create zero-width flex items inside the flex container; locate the Box elements around the spacing (e.g. the closing `</Box>` followed by `{' '}` and the `<Box mi={4} />{' '}` instances) and delete the trailing `{' '}` expressions so only the intended Box components remain.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
🧰 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/directory/tabs/users/UsersTable/UsersTableRow.tsx
🧬 Code graph analysis (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)
packages/ui-client/src/components/GenericTable/GenericTableCell.tsx (1)
GenericTableCell(6-6)
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx`:
- Around line 30-32: The UserAvatar is not wrapped in a flex-constrained
container, so it can shrink unexpectedly; update UsersTableRow
(UsersTableRow.tsx) to wrap the conditional UserAvatar in a Box with flex
constraints (e.g., <Box flexGrow={0}>) similar to ChannelsTableRow.tsx and
TeamsTableRow.tsx, ensuring the avatar has fixed flex behavior while the
adjacent text container (the inner Box with flexShrink={1}) continues to handle
truncation.
---
Nitpick comments:
In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx`:
- Around line 37-38: Remove the spurious React text nodes `{' '}` in
UsersTableRow.tsx that create zero-width flex items inside the flex container;
locate the Box elements around the spacing (e.g. the closing `</Box>` followed
by `{' '}` and the `<Box mi={4} />{' '}` instances) and delete the trailing `{'
'}` expressions so only the intended Box components remain.
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
Show resolved
Hide resolved
KevLehman
added
the
contrib: valid
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
2 times, most recently
from
a8122ae to
c2bc74f
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)
37-38: Redundant{' '}text nodes inside a flex container.
{' '}text nodes have no visual effect when their parent isdisplay='flex'— horizontal spacing is entirely controlled by the<Box mi={4} />spacer. Remove them.♻️ Proposed cleanup
- </Box>{' '} - <Box mi={4} />{' '} + </Box> + <Box mi={4} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx` around lines 37 - 38, Redundant {' '} text nodes inside the UsersTableRow JSX create no visual spacing inside the flex container; remove the stray {' '} text nodes surrounding the spacer <Box mi={4} /> in the UsersTableRow component so spacing is handled solely by the <Box mi={4} /> element and ensure the surrounding tags remain valid JSX after deletion.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
🧰 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/directory/tabs/users/UsersTable/UsersTableRow.tsx
🧬 Code graph analysis (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)
packages/ui-client/src/components/GenericTable/GenericTableCell.tsx (1)
GenericTableCell(6-6)
⏰ 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). (2)
- GitHub Check: 📦 Build Packages
- GitHub Check: CodeQL-Build
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx`:
- Around line 30-32: The avatar still can shrink because it isn't prevented from
flex-shrinking; wrap the UserAvatar element in a container with flexShrink={0}
(or set flexShrink={0} on the element that renders the avatar) so the avatar
never compresses when the parent Box (display='flex') is constrained—update the
JSX around the UserAvatar in UsersTableRow (the Box containing UserAvatar and
the adjacent text Box) to add a wrapper with flexShrink={0} for the avatar.
---
Nitpick comments:
In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx`:
- Around line 37-38: Redundant {' '} text nodes inside the UsersTableRow JSX
create no visual spacing inside the flex container; remove the stray {' '} text
nodes surrounding the spacer <Box mi={4} /> in the UsersTableRow component so
spacing is handled solely by the <Box mi={4} /> element and ensure the
surrounding tags remain valid JSX after deletion.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #38538 +/- ##
===========================================
- Coverage 70.55% 70.55% -0.01%
===========================================
Files 3189 3189
Lines 112703 112703
Branches 20429 20429
===========================================
- Hits 79521 79520 -1
+ Misses 31119 31118 -1
- Partials 2063 2065 +2
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
2 participants
Proposed changes (including videos or screenshots)
Fixed an issue where user avatars in the Directory > Users table would shrink incorrectly when the screen width was reduced or when usernames were very long.
Changes made:
UsersTableRow.tsxto use the same Flexbox implementation as theAdmin > Userstable.withTruncatedTextto the GenericTableCell, same asAdmin> Userstable, consistent overflow handling.This ensures avatars maintain a fixed size regardless of screen width or text length, aligning the behaviour with the Admin view.
Issue(s)
fixes #38536
Steps to test or reproduce
Directory > Userstab.Further comments
Before behaviour (buggy):
Screencast.from.2026-02-07.19-55-23.mp4
After behaviour (fixed):
Screencast.from.2026-02-07.20-01-37.mp4
Summary by CodeRabbit