Bug 436559 - GTK3 CSD buttons are noticeably smaller than regular Breeze Qt style
Summary: GTK3 CSD buttons are noticeably smaller than regular Breeze Qt style
Status: CONFIRMED
Alias: None
Product: systemsettings
Classification: Applications
Component: kcm_style (show other bugs)
Version: 5.21.4
Platform: unspecified All
: NOR minor
Target Milestone: ---
Assignee: Plasma Bugs List
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-05-04 01:36 UTC by Patricio Villar
Modified: 2023-03-04 22:36 UTC (History)
10 users (show)

See Also:
Latest Commit:
Version Fixed In:


Attachments
buttons as they currently are (26.41 KB, image/png)
2021-05-04 18:40 UTC, Patricio Villar
Details
buttons with my workaround (26.34 KB, image/png)
2021-05-04 18:41 UTC, Patricio Villar
Details
Generated SVGs visual diff (72.28 KB, image/png)
2021-05-05 21:07 UTC, Mikhail Zolotukhin
Details
Issue with 200% scaling, dolphin, input remapper, pamac, pamac about dialog (11.66 KB, image/png)
2023-03-04 22:36 UTC, daf
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Patricio Villar 2021-05-04 01:36:37 UTC
SUMMARY
Minimize, Maximize and Close buttons on GTK3 apps that use CSD are noticeably smaller than the regular Breeze Qt style decorations.


STEPS TO REPRODUCE
Compare say Dolphin window decorations to Foliate's or Chromium's (with CSD enabled).


OBSERVED RESULT
Notice how GTK3 CSD buttons are significantly smaller.


EXPECTED RESULT
Window decoration buttons among both toolkits should be the same size.


SOFTWARE/OS VERSIONS
Operating System: FreeBSD 13.0-RELEASE
KDE Plasma Version: 5.21.4
KDE Frameworks Version: 5.81.0
Qt Version: 5.15.2


ADDITIONAL INFORMATION
I've come up with a workaround: If one modifies "~/.config/gtk-3.0/gtk.css" so it looks like this, the size of the buttons become the same as Breeze Qt:

@import 'colors.css';

window headerbar.default-decoration button.titlebutton,
window .titlebar.default-decoration button.titlebutton {
  padding: 0px;
  min-height: 20px;
  min-width: 20px;
  margin: 0; }

window headerbar button.titlebutton,
window .titlebar button.titlebutton {
  padding: 0px; }
  window headerbar button.titlebutton.close,
  window .titlebar button.titlebutton.close {
    padding: 0px;
    background-size: 20px 20px; }

  window headerbar button.titlebutton.maximize,
  window .titlebar button.titlebutton.maximize {
    padding: 0px;
    background-size: 20px 20px; }

  window headerbar button.titlebutton.minimize,
  window .titlebar button.titlebutton.minimize {
    padding: 0px;
    background-size: 20px 20px; }

.maximized window headerbar button.titlebutton.maximize, .maximized window .titlebar button.titlebutton.maximize {
  padding: 0px;
  background-size: 20px 20px; }

window.background.chromium {
  padding: 2px; }
  window.background.chromium headerbar button.titlebutton.close,
  window.background.chromium .titlebar button.titlebutton.close {
    padding: 2px; }
  window.background.chromium headerbar button.titlebutton.maximize,
  window.background.chromium .titlebar button.titlebutton.maximize {
    padding: 2px; }
  window.background.chromium headerbar button.titlebutton.minimize,
  window.background.chromium .titlebar button.titlebutton.minimize {
    padding: 2px; }
  window.background.chromium.maximized headerbar button.titlebutton.maximize,
  .maximized .titlebar button.titlebutton.maximize {
    padding: 2px; }


With this, most GTK 3 apps even sport their headerbar buttons with less padding between them, and so they resemble better the Breeze Qt titlebar buttons. Except Chromium, but that's always been the case as far as I remember. Still, at least the size of the buttons becomes more consistent.
Comment 1 Nate Graham 2021-05-04 17:45:48 UTC
Can you supply a screenshot that shows the problem? I feel like they look the same to me.
Comment 2 Patricio Villar 2021-05-04 18:40:37 UTC
Created attachment 138147 [details]
buttons as they currently are

kate, chromium and foliate
Comment 3 Patricio Villar 2021-05-04 18:41:31 UTC
Created attachment 138148 [details]
buttons with my workaround

kate, chromium and foliate
Comment 4 Patricio Villar 2021-05-04 18:43:02 UTC
(In reply to Nate Graham from comment #1)
> Can you supply a screenshot that shows the problem? I feel like they look
> the same to me.

Done ;)
Comment 5 Nate Graham 2021-05-04 18:45:51 UTC
Now that I see the issue in your screenshots, it magically becomes obvious to me on my system too. Confirmed.

Maybe you can try your hand at submitting a merge request at https://invent.kde.org/plasma/breeze-gtk/-/merge_requests/?
Comment 6 Patricio Villar 2021-05-04 18:53:21 UTC
(In reply to Nate Graham from comment #5)
> Now that I see the issue in your screenshots, it magically becomes obvious
> to me on my system too. Confirmed.
> 
> Maybe you can try your hand at submitting a merge request at
> https://invent.kde.org/plasma/breeze-gtk/-/merge_requests/?

Sure! Gonna try and do it in a few minutes
Comment 7 Nate Graham 2021-05-04 19:25:33 UTC
Actually I just noticed that the buttons are the right size on Wayland. They are only too small on X11 for me.

Can you confirm? Also, are you using any display scaling or a non-default font DPI value?
Comment 8 Patricio Villar 2021-05-04 19:40:16 UTC
(In reply to Nate Graham from comment #7)
> Actually I just noticed that the buttons are the right size on Wayland. They
> are only too small on X11 for me.
> 
> Can you confirm? Also, are you using any display scaling or a non-default
> font DPI value?

Oh! I just submitted 2 merge requests :/
No, I'm not using any display scaling nor a non-default font DPI. I'll have to see about Wayland though. Lucky me Plasma-on-wayland experience just became better on FreeBSD :)
Comment 9 Patricio Villar 2021-05-04 20:58:02 UTC
(In reply to Nate Graham from comment #7)
> Actually I just noticed that the buttons are the right size on Wayland. They
> are only too small on X11 for me.
> 
> Can you confirm? Also, are you using any display scaling or a non-default
> font DPI value?

Can confirm buttons are the correct size on Wayland, except for Chromium with CSD which are still smaller than the rest.
Although I did notice that if you make your "~/.config/gtk-3.0/gtk.css" look like this:

@import 'colors.css';
@import 'window_decorations.css';


then all GTK3 CSD buttons become smaller again (like they are on X11)...
Comment 10 Alois Wohlschlager 2021-05-05 13:08:13 UTC
(In reply to Nate Graham from comment #5)
> Now that I see the issue in your screenshots, it magically becomes obvious
> to me on my system too. Confirmed.
> 
> Maybe you can try your hand at submitting a merge request at
> https://invent.kde.org/plasma/breeze-gtk/-/merge_requests/?

This should be implemented in kde-gtk-config, not in breeze-gtk. The current size (18px) is fine for the buttons breeze-gtk ships, but not for the ones kde-gtk-config generates.
Comment 11 Mikhail Zolotukhin 2021-05-05 21:07:47 UTC
Created attachment 138180 [details]
Generated SVGs visual diff

If we compare the buttons' svg from Breeze GTK and the one GTK Daemon generates, we can notice the difference in margins from the edges.
Comment 12 Paul McAuley 2021-07-17 11:52:17 UTC
(In reply to Nate Graham from comment #7)
> Actually I just noticed that the buttons are the right size on Wayland. They
> are only too small on X11 for me.
> 
> Can you confirm? Also, are you using any display scaling or a non-default
> font DPI value?

The difference you are seeing on Wayland is because you are likely using the default Breeze theme which is hard-coded on Wayland. On X11, the GTK CSD titlebar buttons are auto-generated based on your selected window decoration, but this auto-generation creates the titlebar buttons too small. Try a different window decoration on Wayland and you will see it is broken as always shows Breeze.
Comment 13 Paul McAuley 2021-07-17 12:54:14 UTC
The solution offered in the OP seems to fix the size at 100% display scaling, however, I am using 250% scaling and the size of the GTK CSD titlebar buttons is still too small even with the OP's change.
Comment 14 Tornado99 2021-12-09 17:47:24 UTC
I have 100% scaling and no forced font dpi on my 1440p monitor (although I did have 125% in the past). Somehow the firefox buttons are still tiny. This code in /home/[user]/.config/gtk-3.0/gtk.css fixes it

@import 'colors.css';
window headerbar.default-decoration button.titlebutton,
window .titlebar.default-decoration button.titlebutton {
  padding: 0px;
  min-height: 28px;
  min-width: 28px;
  margin: 0; }

window headerbar button.titlebutton,
window .titlebar button.titlebutton {
  padding: 0px; }
  window headerbar button.titlebutton.close,
  window .titlebar button.titlebutton.close {
    padding: 0px;
    background-size: 28px 28px; }

  window headerbar button.titlebutton.maximize,
  window .titlebar button.titlebutton.maximize {
    padding: 0px;
    background-size: 28px 28px; }

  window headerbar button.titlebutton.minimize,
  window .titlebar button.titlebutton.minimize {
    padding: 0px;
    background-size: 28px 28px; }

.maximized window headerbar button.titlebutton.maximize, .maximized window .titlebar button.titlebutton.maximize {
  padding: 0px;
  background-size: 28px 28px; }

window.background.chromium {
  padding: 0px; }
  window.background.chromium headerbar button.titlebutton.close,
  window.background.chromium .titlebar button.titlebutton.close {
    padding: 0px; }
  window.background.chromium headerbar button.titlebutton.maximize,
  window.background.chromium .titlebar button.titlebutton.maximize {
    padding: 0px; }
  window.background.chromium headerbar button.titlebutton.minimize,
  window.background.chromium .titlebar button.titlebutton.minimize {
    padding: 0px; }
  window.background.chromium.maximized headerbar button.titlebutton.maximize,
  .maximized .titlebar button.titlebutton.maximize {
    padding: 0px; }
Comment 15 daf 2023-03-04 22:36:05 UTC
Created attachment 157003 [details]
Issue with 200% scaling, dolphin, input remapper, pamac, pamac about dialog

Just adding a screenshot of how it looks when 200% scaling.

From back to front:
- dolphin window (qt5)
- input remaper config window (gtk3)
- pamac main window (gtk3)
- pamac about dialog window (gtk3)

System:
Operating System: Manjaro Linux 
KDE Plasma Version: 5.27.2
KDE Frameworks Version: 5.103.0
Qt Version: 5.15.8
Kernel Version: 6.2.2-1-MANJARO (64-bit)
Graphics Platform: X11