search

codewars / codewars.com

Issue tracker for Codewars
https://www.codewars.com
BSD 2-Clause "Simplified" License
2.09k stars 219 forks source link

The <div id="description> element has huge margin #2352

Open FArekkusu opened 3 years ago

FArekkusu commented 3 years ago

The description has become narrow due to a huge margin of the <div id="description"> block.

It seems the source of the issue is the max-w-5xl CSS class which limits the block's width:

.max-w-5xl {
    max-width: 64rem!important;
}

Screenshots

image

image

Browser

┆Issue is synchronized with this Clickup by Unito

Blind4Basics commented 3 years ago

(I actually like the narrower thing. On my screen, that's rather weird to have the full width used and that doesn't help readability. If this narrowing doesn't happen on small screens, it might actually be a good idea)

edit: tho, to really make it pleasant, alignment would need to be justified...

kazk commented 3 years ago

Making it narrow was intentional. The description becomes difficult to read on wider screen. But it does look broken. I'll make the whole page narrow, similar to the dashboard and profile.

kazk commented 3 years ago

If this narrowing doesn't happen on small screens

It doesn't. It's a max width.

Blind4Basics commented 3 years ago

Maybe the same should be applied in the solutions page and the discourse? (show kata description) For now it's a bit weird that the details page is the only one showing the description like this. (Next question would be: what about the trainer?)

kazk commented 3 years ago

Maybe the same should be applied in the solutions page and the discourse?

Yeah, I was lazy, and didn't think about those. I ran into a super ugly description because of the width combined with centered formulas/tables, and added this constraint without thinking much.

(Next question would be: what about the trainer?)

I wasn't thinking of the trainer because it doesn't get as wide.

Voileexperiments commented 3 years ago

I don't think we really need to limit max-width at all. Limiting max-width are for reading passages where a paragraph is long and it can be disorienting trying to find the next line on the other side; most CW katas have paragraphs so short they seldom spans more than one line.

Also, currently this is set to a flat 64em (which is 1024px) which is a very horrible implementation: it might look good in 1366x768 but anything bigger would make it look very inefficient, which includes 1920x1080. I believe most implementations either assigns different values for each breakpoint, or set it to a higher value (around 1100-1600px).