Page MenuHomePhabricator

Sitename with whitespace breaks over the header size
Closed, DeclinedPublic

Assigned To
None
Authored By
Florian
Jan 19 2020, 3:47 PM
Referenced Files
F31517336: Screen Shot 2020-01-19 at 5.44.35 PM.png
Jan 19 2020, 4:50 PM
F31517328: Screen Shot 2020-01-19 at 5.37.35 PM.png
Jan 19 2020, 4:50 PM
F31517291: image.png
Jan 19 2020, 3:47 PM
F31517290: image.png
Jan 19 2020, 3:47 PM

Description

See this page (by using timeless as a preview skin):

image.png (219×274 px, 19 KB)

The sitename should instead look like this:

image.png (228×266 px, 18 KB)

without breaking on a whitespace. This should be easy to achieve by setting the css property white-space to nowrap, however, I'm not sure what the implication so this would be :)

Event Timeline

I think this is a browser issue or something else interfering. I cannot reproduce with Chrome.

Screen Shot 2020-01-19 at 5.44.35 PM.png (404×1 px, 254 KB)

Even if I shrink my window to the absolute minimum size

Screen Shot 2020-01-19 at 5.37.35 PM.png (290×488 px, 27 KB)

Sorry, I should've said that: I made the images, as I intended to fix this issue on the local wiki by adding the css property in the timeless.css. That's why you can't actually reproduce this issue on the linked wiki anymore, however it still persists and should (from what I see) not be browser-specific.

Isarra subscribed.

Yeah, there's not going to be a fix-all here. Plenty of sites just have longer names that absolutely need to wrap (see meta as a somewhat silly example), whereas others won't want it, or will want different handling entirely. Basically, it's kind of on the site to make sure things come out optimally, either by:

  • Setting some custom css in the wiki's Timeless.css, such as no-wrap in this case where it actually does make sense
  • Using a wordmark image for the logo that's tailored to this size and placement (also good for other skins like Minerva anyway, such as if you're using MF) via $wgLogos['wordmark']
  • Setting a different display string via changing the contents of the timeless-sitetitle message

I, er, hope this helps?