[bubble messages] Move right-hand messages and avatars closer to the "read receipt gutter"

[ShadowJonathan]

(Breakout of matrix-org/matrix-react-sdk#6291 (review))

Is your suggestion related to a problem? Please describe.

When chatting with bubble messages on, I notice there's a large gap between the read receipts of my messages and the "alignment" of my message itself.

The avatar hangs on the side of the message, but the "gutter" seems to stop on the right side of that avatar.

Describe the solution you'd like.

Make sure that the avatar can "hang" over the gutter, like so;

Current;

Suggested;

[amshakal]

I beleive the issue with bringing them this close together is that it creates situations where there might be an overlap between the read recipt, the avatar and the time stamp.

Another problem with implementing this is that we want to fix the alignment between the avatar and the bubble as mentioned in here, and on doing so, there will definitely be an overlap.

[germain-gg]

At this stage it seems like the gutter space was added on purpose to cater for some specific scenarios in the timeline.
It seems unlikely that we will change it at this stage, therefore will close this issue

Maybe future design decisions will lead us to revisit this