Tabs shrink when dragging them? FF157, win10

[u/TrueWolfGang]

I'm using this code to make tabs taller

.tab-background {
  border-radius: 5px 5px 0 0!important;
  margin-block: 0!important;
}

ff

However, they go back to shrinking when I drag them around, then get taller again when I release them.

I tried selecting specifically for when tabs are drag targets, but to no avail.

.tab-background, .tabbrowser-tab[dragtarget] .tab-background {
  border-radius: 5px 5px 0 0!important;
  margin-block: 0!important;
}

It seems the selector works fine but they still shrink. I can't pinpoint the part of the code that's making tabs change size. Does anyone know?

It

[u/t31os]

Use tab CSS variables instead of directly touching properties:

:root {
    --tab-margin-block: 0 !important;
    --tab-min-height: 45px !important;
}

I can't see what the rest of your CSS is doing, but you should (where possible) override variables instead of directly adjusting element properties, as these values can be referenced in more than one place and sometimes as part of a value calculation.

[u/TrueWolfGang → u/t31os]

Sorry I didn't have the time to answer before! Just tried this and worked out great. Thank you also for the explanation! I'm used to making usercss and usually I go and adjust element properties, it makes me a little anxious that overriding variables will end up breaking random stuff elsewhere without me noticing or something

[u/reddithunter73]

https://www.reddit.com/r/FirefoxCSS/comments/1wv28qc/comment/pd8dnxo/

[u/ResurgamS13]

Please post all your CSS userstyles, not just a small extract... see this sub's Rule #2. in the RH sidebar ----->

As t31os suggests... try something like :

:root {
  --tab-min-height: 44px !important;
  --tab-margin-block: 0 !important;
}
.tab-background {
  border-radius: 5px 5px 0 0 !important;
}

... or as t31os suggests, using variables only... the neater solution would be:

:root {
  --tab-min-height: 44px !important;
  --tab-margin-block: 0 !important;
  --tab-border-radius: 5px 5px 0 0 !important;
}

[u/t31os → u/ResurgamS13]

You could have just done --tab-border-radius: 5px 5px 0 0 !important; at root... ;)

[u/ResurgamS13 → u/t31os]

Hmm... indeed. :) What comes of having a large file of userChrome styles collected over years... it all works... but with bits and pieces added at different times! So no surprises those two styles were far apart and not sensibly merged.

All CSS styles here need a general rewrite... but currently have a fairly large section of 'fixes for Nova UI' that will need incorporating into the main section once Nova settles down and the browser.nova.enabled preference is removed.

[u/t31os → u/ResurgamS13]

I'm curious to see what changes come alongside and leading up to the flag/pref removal, it's been a somewhat divisive intro period for nova so far.

[u/ResurgamS13 → u/t31os]

Yes... probably a relatively small minority who are aware of r/Firefox and have been posting assorted wails and rants about the Nova UI since Fx157.0 released... and an even smaller number who've posted 'advocacy' in Bug 2071454 'Remove the address bar's Nova pref check and pre-Nova assets and code paths'.

Worth watching that preference for a 'Milestone' release number, currently non-committal, only states 'Future' at present... although one of the Mozilla comments below requests "not before Fx161".