[Hold for payment 2021-08-17] Code blocks renders to the end of the edge of the window

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to a conversation
2. Send this message (with code markdown ` )
3. Hello
4. Send this other message
5. Hello stop right there

Expected Result:

Code should be rendered only to the size of the text inside it. It should look something like the message sent in step 5.

Actual Result:

Code block extends to the edge of the window when sent individually.

Workaround:

N/A visual issue.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.82-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @alex-mechler https://expensify.slack.com/archives/C01GTK53T8Q/p1627931956075500

When rendering a code fenced message on a line with no plain text, the code fence renders to the end of the line. If there is any plain text on the line this does not happen. Occurring on desktop

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mountiny]

Reproduced it on main, I believe this can be worked on by External contributor!

[MelvinBot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

Ok. I think this is caused by a recent upgrade to react-native-render-html. This has also affected the inline links. @isagoico can confirm this. send a link and click on the far right on the web. Link should not open but it does. Notice the mouse position and the following image, it opens the link.

Proposal

Relatively fix is minor. We have to add alignSelf: 'flex-start' to the baseFontStyle to fix this.

App/src/styles/styles.js

Line 1963 in e511b1f

baseFontStyle: {

I tested it, works well and it does not break Native devices. Everything seems to work great. It also fixes the links. I will make sure via testing the everything is working as it should after this change.

[mountiny]

Sounds good if you can make sure to test it in all possible scenarios (so it just does not introduce regression somewhere else).

Does this fix both: link and the code?

[parasharrajat]

Yes, it fixes both.

[parasharrajat]

@mountiny can I submit the PR? I believe it's kind of urgent it breaks many things. If so, @JmillsExpensify could this be assigned to exported and assigned to me?
Thanks.