fix: avatar resize issue in users directory table#38538
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 |
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe UsersTableRow layout was refactored to replace nested Flex containers with a single Box-based flex wrapper; the avatar is wrapped in a non-flexing Box and the text container now has explicit flexGrow/flexShrink/flexBasis to prevent avatar resizing. The Bio MarkdownText was moved to be a sibling element while preserving interaction handlers and truncation. 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.
KevLehman
added
the
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.65% 70.64% -0.01%
===========================================
Files 3190 3190
Lines 112732 112732
Branches 20431 20419 -12
===========================================
- Hits 79649 79642 -7
- Misses 31035 31040 +5
- Partials 2048 2050 +2
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
from
c2bc74f to
c8b2470
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)
31-35: LGTM — avatar flex-shrink constraint properly applied.
UserAvataris now correctly wrapped in<Box flexShrink={0}>, preventing avatar compression regardless of username length or container width. This matches theChannelsTableRow/TeamsTableRowsibling pattern and resolves the original issue.🤖 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 31 - 35, Wrap the UserAvatar in a non-shrinking container to prevent avatar compression: in UsersTableRow ensure the avatar is conditionally rendered only when username is present and is wrapped like <Box flexShrink={0}> around the UserAvatar component (preserving props size, title, username and etag) so it matches the ChannelsTableRow/TeamsTableRow pattern and prevents the avatar from being compressed when the username or container is long or narrow.
🧹 Nitpick comments (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)
37-45: Consider replacing the empty spacerBoxwithgapon the flex container.
<Box mi={4} />is a valid but unconventional spacer element. Usinggapon the flex container is more idiomatic for inline flex layouts.♻️ Proposed refactor
- <Box display='flex' alignItems='center'> + <Box display='flex' alignItems='center' gap={4}> <Box fontScale='p2m' withTruncatedText> {name || username} {nickname && ` (${nickname})`} </Box> - <Box mi={4} /> <Box fontScale='p2' color='hint' withTruncatedText> {username} </Box> </Box>🤖 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 - 45, Replace the manual spacer Box used between name and username with a flex gap: remove the standalone <Box mi={4} /> and add a gap prop to the parent Box (the Box with display='flex' and alignItems='center') — e.g., change it to Box display='flex' alignItems='center' gap={4} (or the project's gap token like gap='x4') so spacing is handled idiomatically via the UsersTableRow component's flex container.
🤖 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 37-45: The inner flex wrapper in UsersTableRow (the Box with
display='flex' alignItems='center') needs explicit flex sizing so its children
can shrink and truncate; update that Box to include flexGrow={1},
flexShrink={1}, and flexBasis='0%' (matching the Admin Users pattern) so the
name/username Boxes can properly truncate.
---
Duplicate comments:
In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx`:
- Around line 31-35: Wrap the UserAvatar in a non-shrinking container to prevent
avatar compression: in UsersTableRow ensure the avatar is conditionally rendered
only when username is present and is wrapped like <Box flexShrink={0}> around
the UserAvatar component (preserving props size, title, username and etag) so it
matches the ChannelsTableRow/TeamsTableRow pattern and prevents the avatar from
being compressed when the username or container is long or narrow.
---
Nitpick comments:
In `@apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx`:
- Around line 37-45: Replace the manual spacer Box used between name and
username with a flex gap: remove the standalone <Box mi={4} /> and add a gap
prop to the parent Box (the Box with display='flex' and alignItems='center') —
e.g., change it to Box display='flex' alignItems='center' gap={4} (or the
project's gap token like gap='x4') so spacing is handled idiomatically via the
UsersTableRow component's flex container.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.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). (2)
- GitHub Check: 📦 Build Packages
- 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/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)
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
2 times, most recently
from
47295e2 to
55a57c7
Compare
|
PR is ready for review |
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
from
55a57c7 to
f2920cd
Compare
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
from
f2920cd to
2e05501
Compare
Khizarshah01
force-pushed
the
fix/users-table-avatar-shrink
branch
from
2e05501 to
2d9e7dd
Compare
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