Repository navigation
[Pay 5/19] Wrap text when it includes markup #2790
Description
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Expected Result:
When sending a message with a hyperlink, any text within that message/paragraph which won't fit in the current window should wrap onto the next line within the current window. When resizing the window, this should change where the wrap in the text occurs.
Actual Result:
When sending a message with a hyperlink, the text sent remains on one line and cannot be scrolled to the right to read the remaining text.
Action Performed:
- Open staging.expensify.cash
- Sign in if not already
- Enter a chat with anybody
- Send the message:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
- This should wrap the text perfectly.
- Send the message:
www.expensify.com Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
- This will send the message on just one line.
Workaround:
Try to copy the line and paste it into the compose box (or some other text editor) in order to read what was written.
Platform:
Where is this issue occurring?
- Web
- iOS
- Android
- Desktop App
- Mobile Web
Haven't been able to repro on iOS or Android. Not sure what the PR that introduced it was. Perhaps #2320? @yuwenmemon?
Version Number: 1.0.41-9 (1.0.41-9) on staging.expensify.cash
Logs: N/A
Notes/Photos/Videos:
Expensify/Expensify Issue URL: Do I need this? I thought I could just create this here? cc @Expensify/contributor-management
Activity
MelvinBot commentedon May 11, 2021
Triggered auto assignment to @JmillsExpensify (
AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.twisterdotcom commentedon May 11, 2021
Looks like this is any markup not just hyperlinks:
[-]Wrap text when it includes a hyperlink[/-][+]Wrap text when it includes markup[/+]arielgreen commentedon May 11, 2021
You are correct, our template needs to be updated.
parasharrajat commentedon May 11, 2021
Wow. We missed it for so long. But relatively, the fix is very simple.
we just need to supply
flex: 1to base style herehttps://github.com/Expensify/Expensify.cash/blob/3997ae6620f8a104d08ec059e734934d85550f06/src/components/RenderHTML.js#L182
JmillsExpensify commentedon May 12, 2021
Seeing a bunch of this in v1.0.40-0. Reported here: https://expensify.slack.com/archives/C01GTK53T8Q/p1620796475097600. Releasing to the pool.
MelvinBot commentedon May 12, 2021
Triggered auto assignment to @iwiznia (
Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.8 remaining items
JmillsExpensify commentedon May 12, 2021
Oh thank you! I was hawking this one as well, not sure what happened (maybe because I was assigned)? I'm happy to help push from here btw.
parasharrajat commentedon May 12, 2021
@roryabraham It's ready. Will be listed in few minutes.
[-]Wrap text when it includes markup[/-][+][Pay 5/19] Wrap text when it includes markup[/+]roryabraham commentedon May 12, 2021
@isagoico This should be fixed as of
1.0.42-4roryabraham commentedon May 13, 2021
Verified this fix in
1.0.43-3:roryabraham commentedon May 21, 2021
Paid.