Fix margins in comments

Comments are hard. The user can do whatever, text, pictures, files, etc. And it's up to CC to make it all look good.

Currently, some comments are a bit bigger than others. Like for example here

This doesn't look so clean.

It turns out this is because the content in this case is a paragraph, which by default browser style sheet has margins. Margins are great, because in flowing text they help distinguish elements like paragraphs, lists, etc. However, we don't want them at the very top and the bottom of the comment. There is a rule for zeroing the first and the last margin of a comment's contents (if it's a paragraph, or after !8 (merged) more generally for any child)

.cactus-message-text > *:first-child {
  margin-block-start: 0em;
}

.cactus-message-text > *:last-child {
  margin-block-end: 0em;
}

But why does the issue then appear? Turns out, there is sometimes a wrapping div around the content. This wrapping div has no margins already, but it preserves the margins of its contents like in this case a paragraph (see middle comment in image). For messages of type .cactus-message-text the div isn't always present. Sometimes the paragraph sits directly in .cactus-message-text for which then the rule correctly applies (see first and third comment in image). I'm not sure what the pattern here is.

We could hack around this by zeroing also the first and last margins inside a div. But this now adds more complexity. I think the right thing here would be to just delete the wrapping div. Let the content live in the .cactus-message-text directly without a wrapper. Then the above rule would apply.

This would need to be done also for the other message types like .cactus-message-emote, .cactus-message-image, .cactus-message-audio, .cactus-message-file, and .cactus-message-video. I'm not familiar with them and don't know what elements they can contain. I glanced through the code and found sometimes paragraphs (which has margins!) for example in the error messages.

The ideas in essence:

1. set up a test comment section to see all these message types for development
2. delete any wrapper divs for the different message types
3. zero margins of first and last child within any message type (like for the .cactus-message-text above)