fix: message thread preview style

[diegolmello]

Proposed changes

Fixed the missing ellipsis on thread preview

Issue(s)

https://rocketchat.atlassian.net/browse/CORE-1609

How to test or reproduce

Screenshots

Before	After

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

• Style
  • Improved message component layout and horizontal alignment for better visual consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The PR adds a style prop with flex: 1 to two A11y.Index components in Message.tsx to enable horizontal stretching of the accessibility index wrapper alongside the existing index={2} prop.

Changes

Cohort / File(s)	Summary
Styling & Layout Updates app/containers/message/Message.tsx	Added style={{ flex: 1 }} prop to two A11y.Index components to enable horizontal flex stretching

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

• OtavioStasiak

Poem

🐰 A flex upon the index true,
Makes stretching left and right anew,
Where A11y components play,
Layout flows a better way! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: message thread preview style' directly relates to the changeset which adds style props to Message.tsx components to fix the thread preview appearance (the missing ellipsis).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix.message-preview

---

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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/containers/message/Message.tsx (1)

170-171: LGTM! The flex style correctly enables ellipsis for thread/info messages.

Adding flex: 1 to the A11y.Index allows it to stretch horizontally within its flex row container, enabling text truncation with ellipsis. This is the appropriate fix for the thread-specific rendering path.

Optional refactoring for performance:

The inline style object {{ flex: 1 }} creates a new object on every render. Consider extracting it to styles.ts:

Suggested refactor

In styles.ts, add:

flex1: {
  flex: 1
}

Then update the component:

-						style={{ flex: 1 }}>
+						style={styles.flex1}>

Regarding consistency with the second A11y.Index (lines 189-193):

The regular message path has a different structural layout: the A11y.Index wraps a flex container, rather than being a flex item itself. This architectural difference justifies why it doesn't require the same flex: 1 styling. No changes needed there.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8337ab7 and a62c275.

⛔ Files ignored due to path filters (1)

• app/containers/message/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• app/containers/message/Message.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: ESLint and Test / run-eslint-and-test

🔇 Additional comments (1)

app/containers/message/Message.tsx (1)

170-171: AI summary inconsistency detected.

The AI-generated summary claims the style prop was added "in two locations within Message.tsx", but only one A11y.Index component (lines 170-171) was modified. The second A11y.Index at lines 188-192 remains unchanged.

[OtavioStasiak]

Looks good to me!