Search "in this topic" responsive layout problem with "Ubuntu" base font

[rahim123]

Hi there, I’m having a weird rendering problem at certain zoom levels with Firefox on my site. The problem is with the search “in this topic” text wrapping onto two lines. It appears to only happen with the system base font set to “Ubuntu” and the zoom level at 100% or 110% . I also have my Discourse profile interface font size preference set to “Larger”. I’m seeing the same behavior with Sam’s Simple Theme as well as the default Discourse light theme, and I tried disabling all my theme components, so it doesn’t seem to be related to any other customization apart from the base font style.

Discourse Meta with Sam’s Simple Theme and default Arial font, no bug (also same on my site with Arial base font)

My forum with Sam’s Simple Theme and “Ubuntu” base font

100% zoom, bug present:

110% zoom, bug present:

120% zoom, no bug:

90% zoom, no bug:

[awesomerobot (Kris)]

Re-categorized this as ux because it still works, but the layout is off. Thanks for reporting it! This should be a simple fix, we’ll need to prevent that text from wrapping with a little CSS.

[rahim123]

Thanks a lot Kris! I wasn’t sure if it would be “UX” if it’s not related to adding/removing/moving UX elements. I’ll be interested to see the CSS fix, because I’ve been running into text wrapping issues in a few places with my own theme customizations as well, but that’s my own fault.

[awesomerobot (Kris)]

This should fix it:

https://github.com/discourse/discourse/pull/19904/files

It’s just

white-space: nowrap applied to the button’s CSS

[rahim123]

Thanks a ton Kris! With that fix added to a custom theme component it’s much better now. There is a new quirk now where scrollbars appear only at 100% Zoom and it allows for about 5px of horizontal movement: