iOS - Chat - Spaces above and below comment in a code block format in multiline message are not equal

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.93-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/2644130
Issue reported by: Applause Internal Team
Device used: iPhone 15 iOS 18.1.1
App Component: Chat Report View

Action Performed:

1. Launch ND iOS Hybrid app and sign in as Gmail user
2. Open 1:1 chat
3. Send a multiline message with a comment in a Code block format in the middle, e.g. 1 line - plain text, 2 line - code block, 3 line - plain text.

Expected Result:

Spaces above and below comment in a code block format in multiline message are equal

Actual Result:

Spaces above and below comment in a code block format in multiline message are not equal

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/bda86d75-e1bb-41bc-81cd-e7a3b237868d

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Spaces above and below comment in a code block format in multiline message are not equal

What is the root cause of that problem?

We're using codeWordStyle for InlineCodeBlock in

App/src/components/InlineCodeBlock/index.native.tsx

Line 34 in 9689e56

wordStyles={[boxModelStyle, styles.codeWordStyle]}

and it has top: 4

App/src/styles/utils/codeStyles/index.ios.ts

Line 10 in 9689e56

top: 4,

that cause the inconsistency distance

What changes do you think we should make in order to solve the problem?

The reason we need to add top: 4 is when it's display as group. Here's what happens if we don't use top: 4, the codeblock is quite close to the display name

To avoid the inconsistency distance, we should use marginVertical: 4 (or whatever value we want) instead of top: 4

1. Remove top: 4 in codeWordStyle
2. Add marginVertical: 4 in InlineCodeBlock

return (
        <TDefaultRenderer
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...defaultRendererProps}
            style={{
                marginVertical: 4,
            }}
        >

we can do the same with PreRenderer

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

It's the UI issue so no need to add unit test

What alternative solutions did you explore? (Optional)

We can simplify remove top: 4 in codeWordStyle

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Result