Messages balloons width improve

[elatif2020]

We would like to improve the messages width logic by mimicking telegram.
Currently we have margins

We want to change the margins and also add max width for the message balloons (depending on the width of the chat area), As follows:

• Decrease the minimal allowed margins to 22 pixels.
• For my own message the minimal allowed left margin should be increased to 22+46=68 pixels, so my message should not overlap the avatars.
• The max width of a message balloon is 537 pixels (above this number the left margin is increased for my own messages and right margin is increased for others messages).

Also make sure to keep the behavior we already have (I think)

• Once a text line was broken due to it’s length fitting into the balloon, the balloon will be of the maximal possible width. Meaning, it will not shrink to best-fit the partial text line. In other word - only one line texts can cause balloons to be of various widths. 2 liners and up will all have the same maximal width.
  In any case - 2 liners are only those which got cut into two lines because of their length, not ones that were cut by a Shift-Enter.
• Words are never broken mid-word, and if a word extends beyond the limit of the balloon, it is moved to the next line (unless one word by itself is longer than the max width, than it will be broken mid word).

For text inside a balloon - say it's aligned to the left (English - LTR, the opposite for RTL).

• Reduce the left-hand margin from 20 pixels to 17 pixels. Note - In Whatsapp BTW it is 11.
  The margin from the right side is also 17 pixels (minimum). So the maximal text length inside a balloon of W pixels width is W - 2X17 = W - 34

[elatif2020]

@roienatan
Addition:

• For others' message the minimal allowed right margin should be increased to 22+23=45 pixels.
• Limit also system messages to have 68 pixels minimal margins on both sides.

[elatif2020]

@roienatan we need the changes in this ticket we were discussing

[roienatan]

@roienatan we need the changes in this ticket we were discussing

@elatif2020

• chat container padding should be reduced to 8px when chat size is smaller them ~500px. For now we'll implement only when tablet/mobile.
• system messages margins: 20px
• long text in current user message should fill all the bubble width (like in other users bubbles)

[elatif2020]

@roienatan Okay, thanks. Some last adjustments:

• The inner padding (for the text inside the ballon) should be equal in both sides. Let's make it 12 pixels for both (same for desktop).

• The outer padding of my message ballon to the right is a bit too small. Let's make it also 12 pixels, only to the right, only for mobile.

[elatif2020]

we have an issue with missing right margin on mobile

[elatif2020]

@roienatan
The inner padding of my own messages is still not equal in both sides (12 pixels left, 8 pixels right)
Should change the right to 12 pixels