Status-react: Message bubble is too wide on iPhone 5s (can't read part of text) and on Galaxy S6 (very close to screen edge)

[annadanchenko]

Description

Type: Bug

Summary: there are 2 issues with bubble width:

1. end of the string is not visible in the bubble on iPhone 5s
   

1. right side of the bubble is too close to the edge of the screen on Samsung Galaxy S6 that contradicts with design from https://github.com/status-im/status-react/issues/6440 (assuming similar expectations on Android)
   

Reproduction

• Open Status
• Join #status channel or receive some 3-4 line messages in any other test channel

Additional Information

• Status version: nightly January 30
• Operating System: Android 6.0.1 real Galaxy S6 and iOS 12.1.2 iPhone 5s

[errorists]

🙏 thank you @annadanchenko for finding that, indeed the design wasn't implemented correctly. @yenda There should be a minimum margin of 64px on the larger side, meaning it cannot be smaller than 64 and if required we decrease the width of the message till it fits.

[yenda]

I'm looking into it, will have a fix tomorrow morning

[yenda]

Ok it should be good now, the old css really didn't care about the minimum left and right margin which is why only increasing the width caused issues on smaller device. I rewrote part of the css in the PR to make sure there is always 64px left and right