search

minetest / contentdb

A content database for Minetest mods, games, and more
https://content.minetest.net
GNU Affero General Public License v3.0
95 stars 46 forks source link

Pre-wrapped text blocks cause alignment issues when lines become too long compared to page width #529

Closed Montandalar closed 5 months ago

Montandalar commented 6 months ago

Summary

A pre-wrapped section, whether it uses syntax highlighting or not, will cause the review to expand its width out and push the avatar and thumb-up/down/neutral icon onto a separate line.

As seen in this review by ROllerozxa on sriqfi's Superflat https://content.minetest.net/packages/srifqi/superflat/#review-2220 2024-04-04-195531_1011x827_scrot

The width requirement varies (I think up to some maximum) according to the width of the browser window. A full 1080p width needs more characters to cause the bad rendering than a half-width window.

Steps to reproduce
  1. Insert a pre-wrapped section with triple backticks ```
  2. Type many characters into one line in it.
  3. Notice how the element width is now too wide and the avatar and rating icon are now on a separate line.

I'm not sure how to address this since the CSS and markdown are just too complicated for me to work out, but I did find that the following CSS rule from bootstrap.min.css:11 forms the 3-column layout in the first place, and disabling it with Firefox dev tools will cause all reviews to look the same as the bugged review element.

  @media (min-width: 768px)
.col-md {
  flex: 1 0 0%;

The rule applies to the elements <div class="col-md pr-0"> that contain the rest of the review after the avatar and rating icon.

rubenwardy commented 5 months ago

Duplicate of #433