fix: prevent message text from being cut off in channel list

[deepakbhagatiitr]

Fixes #4740

In the channel list, long message previews were cut off mid-word or mid-sentence without an ellipsis, especially when the device font size was increased.

Before vs After Comparison

Scale	Before	After
0.85
0.95
1.00
1.15

---

What We Fixed

1. Added ellipsis truncation (...) instead of cutting text abruptly.
2. Increased channel row height to support larger text at higher font scales.
3. Improved layout constraints to ensure proper text truncation within the container.

Result

• Messages now show ellipsis when too long.
• No more mid-word or mid-sentence clipping.
• Behaves correctly across all font sizes.
• Text remains readable and visually consistent.

This ensures message previews are always readable and properly truncated at any device font size.

Summary by CodeRabbit

• Style

  • Message previews now occupy full width, wrap more reliably, and shrink to avoid overflow.
  • Tightened spacing and layout constraints for compact views; updated base row sizing and font-scaling rules for better proportions.
  • Subtle divider styling adjusted for more consistent row separators.

• Bug Fixes

  • Fixed cross-platform alignment to ensure consistent rendering on Android and other platforms.

• Notes

  • Markdown preview behavior unchanged.

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

[coderabbitai]

Walkthrough

Wraps the markdown preview in a new container, adjusts cross-platform align/width handling for last message layout, tightens flex constraints in RoomItem styles, adds small-font base row height constants and conditional row-height logic, and introduces a hairline-based border width in the wrapper styles.

Changes

Cohort / File(s)	Summary
RoomItem — LastMessage app/containers/RoomItem/LastMessage.tsx	Wraps MarkdownPreview with a View using styles.lastMessageContainer; changes alignSelf/width logic (Android vs non-Android) and adds View to imports.
RoomItem — Styles app/containers/RoomItem/styles.ts	Adds lastMessageContainer (flex:1, flexShrink:1, minWidth:0, marginRight:4); sets minWidth: 0 on centerContainer and row; updates markdownText with width: '100%' and flexShrink: 1.
Markdown Preview app/containers/markdown/components/Preview.tsx	Two Text props (ellipsizeMode="tail", allowFontScaling={true}) are present but commented out; no active behavior change.
Responsive Layout app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx	Adds BASE_ROW_HEIGHT_SMALL_FONT = 82 and BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT = 68; introduces SMALL_FONT_THRESHOLD and chooses base heights based on fontScale, then multiplies by fontScale for final row heights.
RoomItem — Wrapper app/containers/RoomItem/Wrapper.tsx	Imports StyleSheet and computes borderWidth = Math.max(StyleSheet.hairlineWidth, 0.5); sets borderBottomWidth on center container using borderWidth.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Inspect LastMessage.tsx + styles.ts interplay for Android vs iOS width/align behavior and ensure no text clipping regressions.
• Verify new small-font constants and conditional logic in useResponsiveLayout.tsx for edge fontScale values.
• Confirm borderWidth change in Wrapper.tsx behaves visually as intended across devices.

Suggested reviewers

• OtavioStasiak

Poem

🐰 I wrapped the preview snug and neat,

nudged widths and flex so lines won't beat.
A tiny border, heights tuned with care,
no more cropped tails — hop, fixed with flair. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR addresses the core requirement from issue #4740 by implementing ellipsis truncation and improving layout constraints to prevent mid-word message cropping across font sizes.	Address reviewer feedback about extra bottom spacing for small font scales and verify text truncation works correctly across all tested font scale configurations to fully resolve the issue.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main objective of the PR: preventing message text from being cut off in the channel list by implementing ellipsis truncation and layout improvements.
Out of Scope Changes check	✅ Passed	All changes directly support the truncation and layout improvement objectives: styling adjustments, responsive height calculations for font scaling, and view container restructuring align with the stated goals.
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

---

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

[Rohit3523]

Screenshot for before and after seems same

Also can you please add images like this

| Scale | Before | After |

It will be easy to compare the changes

[deepakbhagatiitr]

The major issue was with smallest font...
have added the ellipsis truncation and improved layout so that there won't be any cut of text in any font size...

[Rohit3523]

I have noticed some points

1. Your PR is adding extra space in bottom for <= 1x scale font size which hide 1 channel from the list. can you revert this behaviour because showing extra space between two channels is not a good idea

2. Just check this screenshot, here user is trying to say that text is cutting into half because of fixed height.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

app/containers/RoomItem/Wrapper.tsx (1)

14-14: Remove unnecessary fallback operator.

StyleSheet.hairlineWidth always returns a number (minimum 0), so the || 0 fallback is unnecessary.

Apply this diff:

-	const borderWidth = Math.max(StyleSheet.hairlineWidth || 0, 0.5);
+	const borderWidth = Math.max(StyleSheet.hairlineWidth, 0.5);

app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx (1)

23-25: Confusing constant naming: "SMALL_FONT" constants are numerically larger.

The naming is counterintuitive:

• BASE_ROW_HEIGHT_SMALL_FONT = 82 is larger than BASE_ROW_HEIGHT = 75
• BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT = 68 is larger than BASE_ROW_HEIGHT_CONDENSED = 60

Consider renaming to clarify intent, e.g.:

• BASE_ROW_HEIGHT_INCREASED_FOR_SMALL_FONT or BASE_ROW_HEIGHT_SMALL_FONT_ADJUSTED

This would better convey that these are compensatory increases to prevent clipping at reduced font scales.

📜 Review details

Configuration used: CodeRabbit 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 64bf8f7 and b0bf3ce.

📒 Files selected for processing (3)

• app/containers/RoomItem/LastMessage.tsx (3 hunks)
• app/containers/RoomItem/Wrapper.tsx (3 hunks)
• app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• app/containers/RoomItem/LastMessage.tsx

🔇 Additional comments (2)

app/containers/RoomItem/Wrapper.tsx (1)

26-27: Border width change appears unrelated to text truncation fix.

While the border styling enhancement is fine, it doesn't appear to directly address the PR's primary objective of preventing message text from being cut off. The ellipsis truncation logic is likely implemented in other files not shown in this review (e.g., styles.ts, LastMessage.tsx).

Please confirm that:

1. The core text truncation fix (ellipsis, flexShrink, etc.) is properly implemented in the related style and layout files.
2. This border change is intentional and not an unrelated cosmetic tweak.

app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx (1)

33-38: Unable to verify row height UX impact due to infrastructure limitations.

The repository is currently inaccessible through both direct codebase access and GitHub CLI queries, preventing verification of:

• Constant values for row height calculations at small font scales
• Whether test coverage exists for row height behavior
• The specific feedback from reviewer Rohit3523 regarding "extra bottom space" hiding channels
• Current status of any post-review discussions or fixes

The original concerns remain valid and warrant manual verification:

1. Confirm the height increase for fontScale < 0.9 doesn't reduce visible channel count in practice
2. Coordinate with Rohit3523 to confirm whether the concern persists or has been resolved
3. Evaluate whether style-based solutions (ellipsis, flexShrink) could address text clipping without increasing row heights

[deepakbhagatiitr]

have tested and fixed all issues mentioned by u...