Small UI Bug (button text too big)

Plex Players
1

Server Version#: 1.30.0.6359
Player Version#: 4.94.2 (hosted)

It looks like the button styling has changed in the latest relase. Which renders the button content misaligned (icons) and button text too big? I don’t know if this was intentional? My OCD can’t handle this :sweat_smile:

Tested in: Chrome 107.0.5304.89, Edge 107.0.1418.35 and Firefox 106.0.5 (Win11).

image
image1155×459 68.6 KB

2

Thanks for pointing this out, in your image the icon + text looks a touch too low ? Is that what you are seeing ?

Was it off-centre in all 3 browsers ? Chrome, Edge and FF ?

For me Safari, FF and Chrome it looks centred :face_with_peeking_eye:
image

3

You guys always have pixel perfect design. So I was also wondering, how this got trough Q&A :sweat_smile: (joking)

Was it off-centre in all 3 browsers ? Chrome, Edge and FF ?
Yes!

I’m a webdev myself. So yes, I have hard refreshed etc. It is the same on all browsers (win11). Looks like it is a tiny bit offset. It kinda looks like it is because of the responsive sizes. I use a 4K screen (150% scale). If i manually resize the window, I can get it to align on certain sizes - but it is kinda random at my end.

image
image1649×775 71.3 KB

4

I just looked at the CSS for these buttons in devtools. I can get it to look “better” (but not 100% correct), when I disable the following styles:

image
image757×661 128 KB

5

Thanks for your help! Appears to work fine on Mac (all browsers) and off centre on Windows (all browsers). I’m guessing because subtle difference in the font.

6

FWIW, I’m not seeing this on Windows/Chrome (107), unless my eyes are deceiving me:

image

EDIT: first pic was a little dark, replaced with another one.

7

In that pic, the icons look a touch too low. By 1px actually. The check icon has 8px gap on top, 6px on bottom. Should be 7/7.

Thanks again, will take a look.

8

The easiest way to see it on Windows is, by decreasing the height (ex. 21px here) of the button element (.ActionButton-medium-XXXXX) in devtools. Until it aligns with the lowest part of the content (text or icon).

image

… and with font-size and line-height disabled also on .Button-button-XXXXX:

image

But your right. On my Safari (iOS 16.1) it looks better (still 1-2px off though) in the web version.

image

Note: Not that annoying for me. Just something I noticed :hugs:

9

On Mac we use system font. Otherwise we were using a font Segoe UI that is not vertically centered within the line-height.

We are looking at changing the font!

Thanks for your help.