refactor: extract row cell alignment into GenericTableRow by Pr241singh · Pull Request #41442 · RocketChat/Rocket.Chat

Pr241singh · 2026-07-17T13:11:00Z

Proposed changes (including videos or screenshots)

This refactoring removes duplicated row cell alignment styles from the Omnichannel directory table rows by moving the behavior into GenericTableRow.

Changes made

Added an optional cellVerticalAlign prop to GenericTableRow
Replaced duplicated customAlignTop styles in:
- ChatsTableRow
- ContactTableRow
Removed the duplicated CSS from both components

This keeps the alignment logic centralized and avoids repeating the same custom styling across multiple table row implementations.

Issue(s)

Ref #41439

Steps to test or reproduce

Start the application.
Navigate to Omnichannel → Directory → Chats.
Verify that the table renders correctly and the row cells remain vertically aligned to the top.
Navigate to Omnichannel → Directory → Contacts.
Verify that the table renders correctly and the row cells remain vertically aligned to the top.

Further comments

This change is a small refactoring that centralizes the row cell alignment behavior in GenericTableRow, removing duplicated custom CSS while preserving the existing appearance of the Omnichannel directory tables.

Summary by CodeRabbit

Style
- Improved table row consistency by standardizing top alignment for table cells.
- Updated chat and contact directory tables to display multi-line cell content more cleanly.
- Added optional top-alignment support to shared table rows for consistent presentation across the interface.

dionisio-bot · 2026-07-17T13:11:03Z

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 · 2026-07-17T13:11:05Z

⚠️ No Changeset found

Latest commit: feace77

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 · 2026-07-17T13:13:04Z

Walkthrough

GenericTableRow centralizes optional top cell alignment, and omnichannel chat and contact rows use the new prop instead of local CSS classes.

Changes

Generic table alignment

Layer / File(s)	Summary
GenericTableRow alignment support `packages/ui-client/src/components/GenericTable/GenericTableRow.tsx`	Adds `cellVerticalAlign?: 'top'` and conditionally applies top alignment CSS while preserving the provided class name.
Directory row adoption `apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx`, `apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx`	Replaces local alignment styling with `cellVerticalAlign='top'` and removes unused CSS imports and definitions.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: type: feature

Suggested reviewers: tassoevan

🚥 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 clearly summarizes the main change: moving row cell alignment logic into GenericTableRow.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

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

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx (1)
16-20: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win

Remove unused customAlignTop definition and fix css reference error.

The css import from @rocket.chat/css-in-js was removed, but the customAlignTop variable definition using css was left behind. This will cause a compilation/reference error for css and leaves customAlignTop as an unused variable. Please remove this block completely.
🐛 Proposed fix to remove the unused code
-const customAlignTop = css`
-	td {
-		vertical-align: top;
-	}
-`;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx`
around lines 16 - 20, Remove the unused customAlignTop styled definition from
ContactTableRow, including its css template block, so no unresolved css
reference or unused variable remains.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx`:
- Around line 16-20: Remove the unused customAlignTop styled definition from
ContactTableRow, including its css template block, so no unresolved css
reference or unused variable remains.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 993a9b53-1055-4abc-b50f-eb71c670a3ac

📥 Commits

Reviewing files that changed from the base of the PR and between 65a366e and acd7472.

📒 Files selected for processing (3)

apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx
packages/ui-client/src/components/GenericTable/GenericTableRow.tsx

📜 Review details

⏰ Context from checks skipped due to timeout. (1)

GitHub Check: cubic · AI code reviewer

🧰 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:

packages/ui-client/src/components/GenericTable/GenericTableRow.tsx
apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx

🧠 Learnings (2)

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

packages/ui-client/src/components/GenericTable/GenericTableRow.tsx
apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx

📚 Learning: 2026-05-06T12:21:44.083Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.

Applied to files:

packages/ui-client/src/components/GenericTable/GenericTableRow.tsx
apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx

🔇 Additional comments (2)

apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx (1)

56-56: LGTM!

packages/ui-client/src/components/GenericTable/GenericTableRow.tsx (1)

15-28: 🎯 Functional Correctness

Verify TableRow accepts array className values. React className expects a string; if @rocket.chat/fuselage forwards [className, alignTop] directly, the DOM will get a comma-separated class string and the top-alignment styling will break.

dougfabris

actually it has to be made on fuselage side

Pr241singh · 2026-07-17T13:32:10Z

@dougfabris Thanks for the review!

I understand that this should be implemented in Fuselage instead of GenericTableRow.

Should I open a PR in the Fuselage repository to add the alignment support there, and then update this PR to use the new API?

dougfabris · 2026-07-17T14:15:27Z

The fix on fuselage is enough for me

Pr241singh · 2026-07-17T14:47:48Z

@dougfabris Thanks for the feedback! I've moved the implementation into Fuselage as suggested and opened a corresponding PR:

RocketChat/fuselage##2101

Once that change is reviewed and merged, I'll update this PR accordingly. Could you please take another look when you have a chance? Thanks!

dougfabris · 2026-07-17T20:27:51Z

I will take a look as soon as possible, for now we can close this one

refactor: remove duplicated row cell alignment styles

acd7472

Pr241singh requested a review from a team as a code owner July 17, 2026 13:11

dionisio-bot Bot added the community label Jul 17, 2026

coderabbitai Bot added the type: feature Pull requests that introduces new feature label Jul 17, 2026

coderabbitai Bot reviewed Jul 17, 2026

View reviewed changes

Merge branch 'develop' into refactor/41439-row-cell-alignment

c5eee3d

dougfabris requested changes Jul 17, 2026

View reviewed changes

Pr241singh mentioned this pull request Jul 17, 2026

feat(Table): add cellVerticalAlign prop to TableRow RocketChat/fuselage#2101

Open

Merge branch 'develop' into refactor/41439-row-cell-alignment

bf1332e

Pr241singh requested a review from dougfabris July 17, 2026 14:48

Merge branch 'develop' into refactor/41439-row-cell-alignment

feace77

dougfabris closed this Jul 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: extract row cell alignment into GenericTableRow#41442

refactor: extract row cell alignment into GenericTableRow#41442
Pr241singh wants to merge 4 commits into
RocketChat:developfrom
Pr241singh:refactor/41439-row-cell-alignment

Pr241singh commented Jul 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

dionisio-bot Bot commented Jul 17, 2026

Uh oh!

changeset-bot Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

dougfabris left a comment

Uh oh!

Pr241singh commented Jul 17, 2026 •

edited

Loading

Uh oh!

dougfabris commented Jul 17, 2026

Uh oh!

Pr241singh commented Jul 17, 2026

Uh oh!

dougfabris commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Pr241singh commented Jul 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Changes made

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Uh oh!

dionisio-bot Bot commented Jul 17, 2026

Uh oh!

changeset-bot Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

dougfabris left a comment

Choose a reason for hiding this comment

Uh oh!

Pr241singh commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dougfabris commented Jul 17, 2026

Uh oh!

Pr241singh commented Jul 17, 2026

Uh oh!

dougfabris commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Pr241singh commented Jul 17, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Jul 17, 2026 •

edited

Loading

coderabbitai Bot commented Jul 17, 2026 •

edited

Loading

Pr241singh commented Jul 17, 2026 •

edited

Loading