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

[deepak0x]

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[bot]]

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

[deepak0x]

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.

[deepak0x]

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