How to reduce tabs' vertical padding via userChrome.css ?

[guigirl42]

Hi. Can anyone better at using CustomCSS than i am, advise me what is the correct code to use in my userChrome.css to dramatically reduce the padding above & below every tab in the vertical tab bar? My objective is to be able to fit considerably more open tabs into the vertical tabs panel's height, before the scrollbar has to be generated. This is my initial attempt, but as noted it did not work:

/* guigirl 14/9/24: These worked brilliantly when i was exploring the UI in Dev Tools, but do nothing here in my CSS. */
@media (-moz-bool-pref: "zen.tabs.vertical") {
  .tabbrowser-tab {
    margin-inline-start: 0;
    margin: -22px auto;
    margin-top: -22px;
    margin-right: auto;
    margin-bottom: -22px;
    margin-left: auto;
    margin-bottom: 2.5px;
  }
}

@media (-moz-bool-pref: "zen.tabs.vertical") {
  .tabbrowser-tab {
    --zen-browser-tab-icon-size: 14px;
    --tab-min-width: 34px;
  }
}

Thanks.

[guigirl42]

Ah, silly me, i'd forgotten to include the !important code; now it works, albeit even though i've succeeded in substantially shrinking the vertical height, i've not yet sussed out how to fix the consequently truncated pinned-tabs row, & the initial std tab [each of which now suffers a decapitated top]. All, or part, of the reason for the partly decapitated pinned-tabs row seems to be the excessively padded Workspaces button, but so far i've not found the right code to reduce it enough.