code icon indicating copy to clipboard operation
code copied to clipboard

Improve UI spacing on bigger text sizes

Open arovlad opened this issue 4 years ago • 5 comments

I think allowing users to set the text size instead of providing fractional scaling is a very good idea to begin with but the spacing between UI elements needs some improvement. For example, on Code (screenshot below) with 1x scaling factor and the font size set to 1.5 everything feels too compact and not really breathable and evenly spaced.

Screenshot from 2022-02-03 19-24-02_cropped

I think a good rule of thumb to get the spacing right would be using xrandr with the 2x scaling factor to zoom out the screen (screenshot below) so that the zoomed out font size on 2x matches the preferred font size on 1x.

Screenshot from 2022-02-03 19-22-50@2x_cropped

As you can see, the scaled down version looks more pleasant spacing-wise, the titlebar is bigger, the tabs view is bigger, the drop-shadow is heavier and there is much more spacing between the menu entry and it's corresponding keyboard shortcut. The wingpanel is also more comfortably-spaced as opposed to the first version where the applications menu is so near my monitor bezel I can't stand it.

arovlad avatar Feb 03 '22 20:02 arovlad

Values for things like margins and spacing that come from the stylesheet are already automatically scaled, but if apps hard code their own values they won't be scaled, so any issues you experience with incorrect spacing after scaling would have to be reported per app

danirabbit avatar Apr 05 '22 18:04 danirabbit

@danrabbit I am not referring to Code specifically — all apps are affected by this. I chose Code (and Wingpanel) as an example because it uses many GTK/Granite widgets and I thought it would be easier to get my point across. It's not that the spacing is incorrect per se, it's more of a feature request to make the stylesheet more breathable by tweaking the margins for HiDPI a bit. If the spacing values are scaled automatically, then the piece of code (stylesheet/window manager/display server/something else) that scales them needs a bit of an improvement.

arovlad avatar Apr 10 '22 16:04 arovlad

I think part of what you're seeing is that there's no way to scale the icons in Gtk3 and that has a lot of effect on the size of different elements. But also, like I said, margins and spacing in a lot of places are hardcoded in the apps themselves, and not determined by the stylesheet. This should improve significantly in Gtk4, but there's not really anything that can be done in Gtk3 besides reporting against individual apps when it seems like they're using hardcoded margins and spacing.

danirabbit avatar Apr 12 '22 20:04 danirabbit

@danrabbit Aren't tabs a Granite widget? If so, aren't they styled equally across the OS?

Nonetheless if it's indeed a GTK problem and I'll have to wait until ~~Code~~ all the apps get ported to GTK4 you can safely close this as Out of Scope.

arovlad avatar Apr 17 '22 10:04 arovlad

@arovlad for Gtk3, yes. For Gtk4 we're probably going to use Hdy.Tabbar. But the kind of same problems apply with not being able to scale icons in Gtk3

danirabbit avatar Apr 19 '22 17:04 danirabbit