Reduce list spacing

[Vaishakh-SM]

Give a summary of what the PR does, explaining any non-trivial design decisions

This PR makes two CSS improvements:

1. Moves list-related CSS from index.css to the Markdown component.
2. Reduces list item spacing by adjusting the line height.

Before

After

---

Link of any specific issues this addresses

Resolves #4082

[tobitege]

This already looks much better, thanks for working on this!

Though not in the original issue, there's still quite a gap above/below the list (not sure which padding/margin that is), but would you mind making that a little narrower, too, please?

[Vaishakh-SM]

Though not in the original issue, there's still quite a gap above/below the list (not sure which padding that is), but would you mind making that a little narrower, too, please?

Sure!

I also plan on addressing the lint errors related to this change.

[Vaishakh-SM]

I've made the following changes:

• Removed an unused import from the file (was giving a lint error)
• Moved ul and ol components to a new file under the markdown directory (similar to the code file)
• Reduced the spacing between markdown elements.

It seems like the spacing was not caused by padding or the margin of the list, but rather by the spacing between children of the markdown. (Please correct me if I'm wrong here). Reducing the spacing here seemed aesthetically more pleasing.

[tobitege]

Thanks! Our UI specialist will have a final look once he's got time, so please bear with us. 👍

[rbren]

Looking much better! I might also shrink the space before and after the list a bit

[enyst]

@Vaishakh-SM I suggest to merge main, the tests in CI are failing because of an issue that was fixed in the last main.

[Vaishakh-SM]

Looking much better! I might also shrink the space before and after the list a bit

Cool! I've reduced the spacing between before and after the list a bit more. From my understanding, this spacing is caused by the spacing between children of the Markdown component; I've reduced the spacing between the children to shrink the space between them. So this won't be specific to lists but to any children of the mardown component.

Please let me know if this is fine or if we need to follow a different approach here.

[tobitege]

Please let me know if this is fine or if we need to follow a different approach here.

May I ask for an example screenie of the newest version, please? 😃

[Vaishakh-SM]

May I ask for an example screenie of the newest version, please? 😃

Sure! 😃

[tobitege]

Thanks! I don't see a big difference above/below the list compared to the previous image, though? 🤔 Sorry for being picky 😄

[Vaishakh-SM]

Thanks! I don't see a big difference above/below the list compared to the previous image, though? 🤔 Sorry for being picky 😄

Does this look any better? 😄

[tobitege]

Yes! Personally, I like that last version best, awesome! Thanks!! @rbren wdyt?

[Vaishakh-SM]

Also want to add that another bug/issue was causing the list to get rendered weirdly if you have a list within a list as so:

Seems like this was because the white-space: pre-wrap property was getting passed down from Article. The latest changes would fix this since I've set white-space: normal for lists.

After fix: