UI refinements toolbar - Githubissues

nckrtl commented 7 months ago

This PR add come UI refinements to the toolbar:

Better readability of the counter in the tabs by making the background black on selection
Better vertical alignment of the counter
The tooltip now resizes based on the text thanks to white-space no wrap. This solves the big "padding" on the sides
Adjusted background positioning of the logo using center value instead of arbitrary values. This change make it seem the logo got replace but that isn't the case
Tooltips are better readabile when displayed in front of text on the page by apply a backdrop blur

Tested these changes in Safari, Chrome and Firefox.

barryvdh commented 7 months ago

Why did you change the border-radius of the badge?

nckrtl commented 7 months ago

No specific reason, just felt a bit more modern as such pill elements are nowadays often fully rounded. But no problem to revert that change. For comparison:

barryvdh commented 7 months ago

Hmm I think we can keep the old one for now.

nckrtl commented 7 months ago

Back to what it was, should be good to go.

barryvdh commented 7 months ago

Hmm I think the #000 might be a bit 'sharp'. What do you think of #555 as active badge color

nckrtl commented 7 months ago

Yeah that'll work as well, still high enough contrast.

barryvdh commented 7 months ago

Aight done in https://github.com/maximebf/php-debugbar/commit/ca2597a6addc91e0c74f309972e97259cc851d73

maximebf / php-debugbar

UI refinements toolbar #647