App: [Hold for payment 2021-08-17] Code blocks renders to the end of the edge of the window
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:
- Navigate to a conversation
- Send this message (with code markdown ` )
Hello- Send this other message
Hellostop 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:
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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 19 (16 by maintainers)
Anyways, there is a regression which I will shortly. Thanks for the quick response.
Ariel smoked me in volunteering first, with the 2 min reply! Tag me in if I can help too.
Gotchu. Creating it now.
@parasharrajat Yeah, sorry, good point, go for it. Jason was out of office recently I see.
Nicole will create a job posting for this tomorrow (as it is after working hours for her today I believe).
Yes, it fixes both.
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 thebaseFontStyleto fix this. https://github.com/Expensify/App/blob/e511b1f70082ad965b5dc85117d18f4dce54287d/src/styles/styles.js#L1963I 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.