fix: UIKit block messages rendering with smaller font size - #7531
fix: UIKit block messages rendering with smaller font size#7531OtavioStasiak wants to merge 3 commits into
Conversation
GitHub Actions
Inactive
| if (isContext) { | ||
| return <MarkdownPreview msg={element.text} numberOfLines={0} />; | ||
| } | ||
| return <Markdown msg={element.i18n ? I18n.t(element.i18n.key) : element.text} textStyle={{ fontSize: 14 }} />; |
There was a problem hiding this comment.
Removing it the fontSize is 16 and it's the same that the other messages.
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThe UIKit mrkdwn renderer stops forcing a 14px text style. A Storybook story compares regular Markdown rendering with UIKit message sections using short and multiline content. ChangesMarkdown font-size parity
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (2)
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. Comment |
GitHub Actions
Error
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/containers/UIKit/UiKitMessage.stories.tsx (1)
65-65: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd an explicit return type to the new story component.
SectionFontSizeParityrelies on inferred return typing. Add the repository’s preferred React element type annotation to comply with the TypeScript guideline. As per coding guidelines, TypeScript functions must declare explicit parameter and return types. Please verify the existing React type import before applying the annotation.🤖 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 `@app/containers/UIKit/UiKitMessage.stories.tsx` at line 65, Update the SectionFontSizeParity story component to declare the repository-preferred explicit React element return type, reusing the existing React type import or adding the appropriate type import if needed. Keep its current JSX output unchanged and do not alter its parameters.Source: Coding guidelines
🤖 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.
Nitpick comments:
In `@app/containers/UIKit/UiKitMessage.stories.tsx`:
- Line 65: Update the SectionFontSizeParity story component to declare the
repository-preferred explicit React element return type, reusing the existing
React type import or adding the appropriate type import if needed. Keep its
current JSX output unchanged and do not alter its parameters.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6cbffa55-970c-4bc1-815d-c67835271466
⛔ Files ignored due to path filters (2)
app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snapis excluded by!**/*.snapapp/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
app/containers/UIKit/UiKitMessage.stories.tsxapp/containers/UIKit/index.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions
Files:
app/containers/UIKit/index.tsxapp/containers/UIKit/UiKitMessage.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers
Files:
app/containers/UIKit/index.tsxapp/containers/UIKit/UiKitMessage.stories.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Before committing changes to JavaScript or TypeScript files, runpnpm prettier-lintandTZ=UTC pnpm testfor the modified files.
Use the local-first data flow: the UI reads from WatermelonDB, while sagas synchronize data with the server.
Use Redux and Redux-Saga for global or server state, and use Zustand for feature-local stores; do not assume all state is in Redux.
Files:
app/containers/UIKit/index.tsxapp/containers/UIKit/UiKitMessage.stories.tsx
🧠 Learnings (3)
📚 Learning: 2026-04-30T17:07:51.020Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.
Applied to files:
app/containers/UIKit/index.tsxapp/containers/UIKit/UiKitMessage.stories.tsx
📚 Learning: 2026-06-25T18:37:44.793Z
Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7434
File: app/views/ScreenLockConfigView.tsx:101-141
Timestamp: 2026-06-25T18:37:44.793Z
Learning: In the Rocket.Chat React Native codebase, do not treat passing an `async` function directly to an event prop in React/React Native UI components (e.g., `onPress={async () => ...}` in TSX) as a “floating promises” CI-blocking lint issue—this repo does not enable the ESLint `no-floating-promises` rule (while `no-void` is enforced). Only raise robustness follow-ups when there are genuinely unhandled promise paths (e.g., fire-and-forget calls like `save()` that return a Promise that is neither awaited nor handled), and prefer making sure failure paths are explicitly handled/reported rather than blocking on lint-style floating-promise concerns.
Applied to files:
app/containers/UIKit/index.tsxapp/containers/UIKit/UiKitMessage.stories.tsx
📚 Learning: 2026-03-15T13:55:42.038Z
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6911
File: app/containers/markdown/Markdown.stories.tsx:104-104
Timestamp: 2026-03-15T13:55:42.038Z
Learning: In Rocket.Chat React Native, the markdown parser requires a space between the underscore wrapping italic text and a mention sigil (_ mention _ instead of _mention_). Ensure stories and tests that include italic-wrapped mentions follow this form to guarantee proper parsing. Specifically, for files like app/containers/markdown/Markdown.stories.tsx, and any test/content strings that exercise italic-mentions, use the pattern _ mention _ (with spaces) to prevent the mention from being treated as plain text. Validate any test strings or story content accordingly.
Applied to files:
app/containers/UIKit/UiKitMessage.stories.tsx
🔇 Additional comments (2)
app/containers/UIKit/index.tsx (1)
96-96: LGTM!app/containers/UIKit/UiKitMessage.stories.tsx (1)
5-5: LGTM!
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
2 participants
Proposed changes
App (UIKit block) messages were rendering smaller than every other message in the list.
MessageParser.mrkdwn()passed a hardcodedtextStyle={{ fontSize: 14 }}toMarkdown, overriding the 16px message default while keepinglineHeight: 22so app messages looked both smaller and cramped. It was inconsistent even within blocks, sinceplain_text()right above it already renders at 16.Dropping the override makes block mrkdwn inherit the default message font size. The
textStyleprop itself stays, so callers that genuinely need a different size can still opt in.Note this also affects UIKit modals (
ModalParserreusesMessageParser.prototype.mrkdwn) and info cards (InfoCardcallsparser.mrkdwn), which now match theplain_textsize in the same block.Added a
Section + Message font size paritystory rendering a regularMarkdownmessage next to the equivalent mrkdwn section, so any future divergence shows up as a snapshot diff.Issue(s)
https://rocketchat.atlassian.net/browse/NATIVE-1186
How to test or reproduce
Apps.QA)Screenshots
Voip Components
Types of changes
Checklist
Further comments
Summary by CodeRabbit
Bug Fixes
Tests