I can't for the life of me resize gtk4 headerbars

[scar]

I’ve successfully used the Inspector to figure out the CSS code to use to get headerbars in gtk3 apps to a practical size, but nothing seems to work when it comes to gtk4 apps. Is it just not possible or what?

I can see the values of various CCS properties gets changed when I use the Inspector but none of it has an effect on the size of the headerbar. Any tips you have or ideas of what I’m overlooking?

Thanks

[HighKingofMelons (Mikkel Hansen)]

It could be that the widgets inside the headerbar is forcing it to keep its size, so if you haven’t already make sure that you make them small enough to fit aswell. I had few problems with that a long while ago when i was mucking about with it.

[scar]

Ok thanks, I mean I thought I checked all that, let’s see… take for example the calculator…

It has two widgets and a menubutton in the headerbar. The CCS properties of the widgets that would control the size are all already 0. I checked everything under it too.

If I turn on the “Show Layout Borders” option the colors indicate “CCS margins” are what is keeping the headerbar at the current size. Ok finally got some results with this code:

headerbar {
	min-height: 1px;
}
box {
	border-spacing: 0 0;
	min-height: 1px;
	padding-bottom: 0;
}
button {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	min-height: 1px;
}
image {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
}
menubutton {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	min-height: 1px;
}

Will keep messing with it…

[scar]

Ok that code messed with too many other things in the window, had to prefix everything with “headerbar” to keep it restricted to that area, so this seems to be working pretty well:

headerbar, headerbar arrow, headerbar box, headerbar button, headerbar contents, headerbar entry, headerbar image, headerbar menubutton, headerbar slider, headerbar splitbutton, headerbar trough {
	border: 0;
	margin: 0;
	min-height: 0;
}

After that, noticed the edges were a bit off and the headerbars actually defaulted to -1px left/right margins, so adding this helped with that:

window headerbar {
	margin-left: -1px;
	margin-right: -1px;
}