fix: avatar resize issue in users directory table

[Khizarshah01]

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:

• Refactored UsersTableRow.tsx to use the same Flexbox implementation as the Admin > Users table.
• Added withTruncatedText to the GenericTableCell, same as Admin> Users table, 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

1. Go to Directory > Users tab.
2. Resize the browser window to a smaller width or use a long username and name.
3. Observe that the user avatars maintain their size and do not shrink.
4. Observe that long usernames/names are properly truncated with an ellipsis (...).

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

• Refactor
  • Optimized internal layout structure in the users directory table row component for improved code maintainability, replacing nested layout wrappers with a more streamlined flex-based design while preserving all existing functionality and user-facing behavior.

[dionisio-bot]

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]

⚠️ No Changeset found

Latest commit: 21974a8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[coderabbitai]

Walkthrough

The UsersTableRow component's layout structure is refactored to replace nested Flex containers with a streamlined Box-based flex layout. Explicit flex properties are introduced to control element sizing and growth behavior, addressing avatar resizing inconsistencies when space is limited or display names are long.

Changes

Cohort / File(s)	Summary
Layout restructuring apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx	Replaced nested Flex/Box wrappers with a single Box flex container. Added explicit flex properties (flexGrow, flexShrink, flexBasis) to prevent avatar shrinking. Simplified internal content structure while maintaining avatar and name/username display logic and event handlers.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A rabbit's tale of avatars proud,
No longer shrinking in the flex-crowd!
With properties set and containers made tight,
Avatars hold their ground, steady and bright. ✨

🚥 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 accurately describes the main change: fixing avatar resize issues in the users directory table, which matches the core objective of the PR.
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue #38536: refactored layout to prevent avatar shrinking, added withTruncatedText for overflow handling, and aligned implementation with Admin > Users table.
Out of Scope Changes check	✅ Passed	All changes in UsersTableRow.tsx are directly scoped to fixing the avatar resize issue; no unrelated modifications detected in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb366e7 and 21974a8.

📒 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

⏰ 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). (1)

• GitHub Check: cubic · AI code reviewer

🔇 Additional comments (1)

apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx (1)

29-45: Clean refactor — flex layout properly prevents avatar shrinking.

The flexGrow={1} flexShrink={1} flexBasis='0%' pattern on the text container (line 32) correctly confines shrinkage to the text while letting the avatar maintain its intrinsic size. Adding withTruncatedText at both the cell and inner box levels ensures consistent ellipsis truncation. This aligns well with the stated objective of matching Admin > Users behavior.

One small nit: the {' '} JSX whitespace expressions on lines 37 and 38 create anonymous text nodes inside the flex container. In a flex context these become flex items of negligible width, so they're harmless but also serve no purpose since spacing is already handled by mi={4}.

[approve_code_changes, suggest_optional_refactor]

Optional: remove stray whitespace nodes

 						<Box fontScale='p2m' withTruncatedText>
 							{name || username}
 							{nickname && ` (${nickname})`}
-						</Box>{' '}
-						<Box mi={4} />{' '}
+						</Box>
+						<Box mi={4} />
 						<Box fontScale='p2' color='hint' withTruncatedText>

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[cubic-dev-ai]

No issues found across 1 file