Brave's top bar has really ugly dimensionality in Ubuntu

[data_citizen]

Description of the issue:

When I open Brave in Ubuntu 20.04.2.0, the dimensions of the top bar - which includes the tabs, URL bar, bookmark names and icons - look really off.

Firstly, the tabs, URL bar, and bookmark names are absolutely tiny - so tiny that I can barely see the text.

Second, if I try to adjust the scaling factor of fonts in Ubuntu, it blows up the size of the texts inside tabs and bookmark - yet the dimensions of the tabs and bookmark icons remain the same, which makes everything look very cramped, buggy and discomforting.

This issue seems to have something to do with Brave inheriting features from Chromium which resists adjusting its own dimensions based on the OS.

I know the browser is not suppsoed to behave like this (i.e. an intentional design aesthetic) because when I open Firefox in the same environmment it does not have the same issue and looks pretty normal.

How can this issue be reproduced?

1. Download Brave in Ubuntu 20.04.0.0 LTS (resolution 1920 x 1080).
2. Open Brave
3. Observe the dimensions of its top bar (i.e. tabs + URL bar + bookmark names, bookmark icons)

Expected result:

The browser’s top bar (including the tabs, URL bar, bookmark names, bookmark icons) should have complimentary dimensions in relation to each other.

An expected result would be top bar dimensions resembling those in Windows or MacOS. It should be comfortable to look at.

Brave Version:

Version 1.28.105 Chromium: 92.0.4515.131 (Official Build) (64-bit)

Additional Information:

The Ubuntu I am using has a resolution of 1920 x 1080 (Setting → Display)

My device is a Dell Inspiron 5000 2-in-1

[AsAboveSoBelow]

I’m a pretty avid Linux user. Maybe I can assist. I made an article awhile back helping someone who’s Ubuntu Address bar was too big. Is that the same issue you’re experiencing?

-AASB

[data_citizen]

Same issue in terms of diemnsionality except that:

1. The issue extends to not just search bar, but also the tabs and bookmark icons + names.

2. Instead of them being too big, mine are too small - so small that it is getting uncomfortable to see with naked eye.

I tried to tweak it but can never get them to a satisfying dimension. I can increase the font size but not change the overall dimensionality of the tabs, search bar, and bookmark icons. It just makes everything looks cramped up.

The problem is in Brave’s code - it’s not responding to its OS environment. When I open Firefox in the same environment it knows exactly how to accommodate the dimensionality to the OS.

EDIT: I’ve tried the solution you recommended in this previous post, but Brave didn’t respond once I edited and saved the file.

[AsAboveSoBelow]

@data_citizen, I apologize. It seems it’s working properly on mine. However, I’m using Ubuntu 2004, with that said it seems it might be a version bug exclusive to Ubuntu? Does something similar happen with Chrome when you install it?

[data_citizen]

My current hypothesis is that it’s a version bug exclusive to GNOME desktop.

I tried to install the same version of Brave on Fedora 34 which is basically the same GNOME environment as current Ubuntu and the issue with Brave top bar is replicated almsot identically.

Haven’t experimented with Chrome or Chromium in the same environment yet. If the same issue popped up, we can almost be certain that Brave inherited the bug from Chromium.

[AsAboveSoBelow]

Is it possible for you to test this in a VM of Ubuntu 2004? I can when I am free from my schedule.

And screenshots so I can see what you’re referring to?

[data_citizen]

Thanks for helping, I really appreocate it. I took some screenshots of Brave, Chrome, and Firebox in Fedora 34 for reference (it’s not Ubuntu but the issue is virtually identical).

Brave (GNOME):

Chrome (GNOME):

Firefox (GNOME):

Now to be fair they all look really small, but Firefox is at least more readable than Brave or Chrome.

I’ve tried to:

1. Zooming within the browser (dialing it from 100% to 150%): But that still doesn’t solve the overall smallness of the top section of the browser.

2. Increase the font size: Same issue, making the test bigger without adjusting the overall diemnsion of the top section makes everything feel cramped and squeezed.

3. Reduce the resolution of in Setting → Display: It kind of works but then everything becomes blurry and I think there is a better alternative.

The ideal display I’m looking for is something like in Windows:

Do you know if there’s any solution to this? Or are my eyes just playing tricks on me and it’s not really that bad?