Comment top-level lists are missing their paragraph margin

Kissaki commented 1 year ago

Requirements

[X] This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
[X] Please check to see if this issue already exists.
[X] It's a single bug. Do not report multiple bugs in one issue.
[X] It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

Paragraphs have a bottom padding - excluding the last paragraph.

Lists have CSS rules for having a bottom margin, but the comments render in a comment list, which makes comment-content top-level-lists that should have a bottom margin lose their bottom margin.

This makes for inconsistent and inaccessible reading and visuals.

Steps to Reproduce

Post a comment with a list with following content

Technical Details

The relevant CSS declarations in darkly.css are https://github.com/LemmyNet/lemmy-ui/blob/8a2cd127ee02edc186488d7d0455c0679b83bab3/src/assets/css/themes/darkly.css#L292-L304

I would expect them to be defined for .md-div rather than globally - which would work for post content and comment content.

Lemmy Instance Version

0.18.4

Lemmy Instance URL

https://feddit.de

Kissaki commented 1 year ago

I would create a PR with suggested changes, but given that the rendered markdown style is not already defined for .md-div I don't know about possible side-effects - because this styling may apply to other types of lists in the UI outside of rendered markdown content.

Assuming the themes are kept relatively close declaration-wise, I assume this applies to all themes, not just darkly.

abhibeckert commented 8 months ago

Can this please be prioritised? It's really annoying and seems like such a simple fix.

As a workaround, I'm adding horizontal rules after every list... which at least makes comments readable but it's not a great solution.

LemmyNet / lemmy-ui