Waybar: Width of workspaces increased

[lgrahl]

I just upgraded to master and the width of my workspace buttons increased significantly for no apparent reason. Is this is a bug or an issue with my stylesheet?

Many thanks for maintaining this project!

---

style.css

* {
    border: none;
    border-radius: 0;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    min-height: 0;
}

window#waybar {
    font-family: Cantarell, sans-serif;
    font-size: 12px;
    background: rgba(50, 50, 50, .95);
    color: #dcdccc;
    padding: 1px;
}

#workspaces {
    font-size: 13px;
}

#workspaces button {
    padding: 0 .3em;
    margin: 1px;
    background: #222222;
    border-bottom: 1px solid transparent;
}

#workspaces button.focused {
    background: #4b5e4b;
    border-bottom: 1px solid #bfbfbf;
}

#workspaces button.urgent {
    background: #800a0a;
}

#window {
}

#mode {
}

#clock, #battery, #cpu, #memory, #network, #pulseaudio, #tray, #mode {
    border-right: 1px solid rgba(220, 220, 204, .25);
    padding: 0 .6em;
    margin: 1px;
}

#clock {
    min-width: 3.6em;
}

#battery {
}

#battery.charging {
}

@keyframes blink {
    80% {
        background-color: transparent;
        color: #ff5a5a;
    }
    90% {
        background-color: rgba(255, 20, 0, .4);
        color: #dcdccc;
    }
}

#battery.warning:not(.charging) {
    color: #ff5a5a;
}

#battery.critical:not(.charging) {
    color: #ff5a5a;
    animation-name: blink;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#cpu {
    min-width: 3.4em;
}

#memory {
    min-width: 3.4em;
}

#network {
}

#network.disconnected {
    color: #ffb45a;
}

#pulseaudio {
}

#tray {
}

[Alexays]

There has been no change on the workspace module, it must come from your margin/padding

[lgrahl]

I've temporarily set all margin and padding values to 0 and, while the width obviously decreases, the grids are still way too wide.

This is how it looks with the default CSS:

And this is how it looks with both default CSS and default config:

IIRC, that doesn't look the way it should?

[alebastr]

@lgrahl, have you tried checking style for workspace buttons and labels within with gtk inspector? If you select an object, Objects->CSS nodes view would show all applied styles with source stylesheet for non-default values.

[Alexays]

It might also be your Gtk theme.

[rigopoui]

I'm having the same issue. Since my config didn't change at all, the width of the buttons shouldn't have changed. Seems like a bug. Maybe not in the workspace module, but originating from somewhere else.

My gtk theme has been the same as well, and changing it doesn't seem to have any effect.

[alebastr]

Can you try adding following style:

#workspaces button {
   min-width: 0;
}

[rigopoui]

Can you try adding following style:

#workspaces button {
   min-width: 0;
}

That did it :) Cheers.

[alebastr]

Okay, so that's 100% fault of Gtk theme, because I found this by switching all the themes that I had installed.
If you are using materia theme, that could be this recent change: https://github.com/nana-4/materia-theme/commit/5d145d60f3ed718e6fd5b4a4aeb7c587872231ec

[lgrahl]

Perfect. Thanks for your investigation!