fix: elements displayed in block body

[domw30]

What does this do?

• fixes a current issue where elements displayed in the message block body are forced onto new lines when links are included in the message.
• small change that inherits the display, resulting in a correct lay out of elements in the message block body.

Why are we making this change?

• bug found in production. messages are not being displayed as expected. See screenshots below.

How do I test this?

• open messenger and compose messages with a number of elements including highlight and tagging, and urls etc.

Key decisions and Risk Assessment:

Things to consider:

1. How will this affect security?
2. How will this affect performance?
3. Does this change any APIs?

BEFORE:

• channels

• collapsed chat

• full screen

AFTER:

• channels

• collapsed chat

• full screen

[ratik21]

CSS is magic!

[dalefukami]

1. Looks like 'block-body' contains a number of different elements. Did we verify rendering looks correct for all of the cases where other things are rendered and not just the message?
2. Can we remove the flex-direction and gap? Those only apply if you are display: flex, I think.
3. Can we just remove display completely here? Why does it need to inherit from the parent? I think that'd make it difficult to figure out what it's actually rendering as.

[domw30]

Hey Dale!

1. I went through and checked the elements and all looked okay to me. I compared with development. From what I could see the elements render okay. Is there anything that comes to mind that would potentially be broken in the UI ? I just had another quick check and appears okay.

2. Good shout yeah I can remove those.

3. Yeah, same as above, I should be able to just remove it here. Will make that change. Thanks!

[domw30]

This was partly why I didn't want to merge straight away just in case I may have missed something, felt like an update that was 'too easy' to not have caused any unwanted changes in the ui 😬

[dalefukami]

Is there anything that comes to mind that would potentially be broken in the UI ?

I guess mainly the gap that was there. I imagine that was probably the reason for it being flex in the first place.

[domw30]

Thanks for the above. Removing flex wouldn't have been a good solution here. Instead, wrapping the message content (text and links) fixes the issue without having to touch any its parent containers, so the message block positioning/element spacing won't be affected. This should be a cleaner solution. Thanks!