brave / brave-browser

Brave browser for Android, iOS, Linux, macOS, Windows.
https://brave.com
Mozilla Public License 2.0
17.53k stars 2.27k forks source link

Tab favicon and text alignment issues with `brave-horizontal-tabs-update` disabled #39985

Open jgbishop opened 1 month ago

jgbishop commented 1 month ago

Description

This issue appears with the brave-horizontal-tabs-update flag set to Disabled.

Starting with 1.68, the text in each tab is no longer vertically centered (it appears a little too high). Also, descending letters are now being clipped. The screenshot below illustrates this issue.

Note the following from the screenshot:

  1. There is more space below the tab title than above it.
  2. The descending portion of the letter "g" in Google is clipped.

Steps to reproduce

  1. Open Brave 1.68.218 (stable).
  2. Navigate to any website with a descending letter in its page title.
  3. Note the descending portion gets clipped and the text is not vertically centered.

Actual result

busted-tab

Expected result

Text should be centered vertically and all letter text should be visible.

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Brave 1.68.128 Chromium: 127.0.6533.73 (Official Build) (64-bit)

Revision 800676fd9ede2eb4174bac98c186e53749c7201f

OS Windows 10 Version 22H2 (Build 19045.4651)

Channel information

Reproducibility

Miscellaneous information

No response

jgbishop commented 1 month ago

A related issue is also noted here: https://github.com/brave/brave-browser/issues/39976#issuecomment-2249832590

deviato commented 1 month ago

An old obnoxious bug is also back, when you click at the top of the tab it is not selected. Please remove that horrible space at the top and bring back the tabs as in the previous version.

simonhong commented 1 month ago

checking.

RobertWinslow commented 1 month ago

I would like to add that the issue also affects the text in vertical tabs.

image

When the brave-horizontal-tabs-update flag is set to Disabled, the top and bottom of the text is cut off as seen above.

When the flag is Enabled the text correctly renders.

bsclifton commented 2 weeks ago

cc: @simonhong @zenparsing

simonhong commented 2 weeks ago

I can start this issue but curious how much I should fix for tab UI because tab UI is broken a lot with horizontal tab disabled. also I couldn't find previous tab desigin for this mode. cc @rebron @aguscruiz

deviato commented 2 weeks ago

I can start this issue but curious how much I should fix for tab UI because tab UI is broken a lot with horizontal tab disabled. also I couldn't find previous tab desigin for this mode. cc @rebron @aguscruiz

The last working version is 1.67.134, with the "Updated horizontal tabs design" flag disabled in brave://flags/. I get this layout with correct space and tabs clickable by pointing the mouse at the top of the screen. brave