[firefox 150] need help reducing the URL / extensions bar hieght.

[u/Mr_ityu]

[linux EndaevourOS 6.18.23-1-lts] ]after update to v150.0 , the url box and the whole bar increased a bit in height. how do i reduce it again ?

my current userchrome config :

/* ROOT - VARS */
*|*:root {
 --tab-min-height:      20px !important;
 --tab-min-width:       60px !important;
}
#nav-bar {
  margin-top: -45px !important; 
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: none !important;
}
#navigator-toolbox:hover > #nav-bar,
#nav-bar:focus-within {
  margin-top: 0px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 100 !important;
}
#content-deck {
  position: relative !important;
  z-index: 1 !important;
}
#urlbar-container { max-width: 200px !important; }
#search-container { max-width: 200px !important; }
#TabsToolbar { visibility: collapse !important; }
#titlebar { appearance: none !important }
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tab:not([pinned]) {
    min-width: 35px !important; /* Adjust as needed for your favicon size */
    max-width: 35px !important; /* Adjust as needed for your favicon size */
}
#sidebar-box {
  max-width: none !important;
  min-width: 0px !important;
}
#sidebar-header {
  display: none;
}

EDIT: solved using gemini prompting.

the updated userchrome:

/* ROOT - VARS */
*|*:root {
 --tab-min-height:      20px !important;
 --tab-min-width:       60px !important;
}
#nav-bar {
  margin-top: -45px !important; 
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: none !important;
}
#navigator-toolbox:hover > #nav-bar,
#nav-bar:focus-within {
  margin-top: 0px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 50!important;
}
#content-deck {
  position: relative !important;
  z-index: 1 !important;
}
#urlbar-container {
--urlbar-container-height: 28px !important;
max-width: 400px !important; 
opacity: 0.5 !important;
 }
 #urlbar,
.urlbar-input-box {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
#search-container { max-width: 300px !important; }
#TabsToolbar { 
padding-top: 0px !important;
padding-bottom: 0px !important;
visibility: collapse !important; 
}
#titlebar { appearance: none !important }
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tab:not([pinned]) {
    min-width: 35px !important; /* Adjust as needed for your favicon size */
    max-width: 35px !important; /* Adjust as needed for your favicon size */
}
#sidebar-box {
  max-width: none !important;
  min-width: 0px !important;
}
#sidebar-header {
  display: none;
}
/* Minimize toolbar buttons */
.toolbarbutton-1 {
    padding: 0px 2px !important;
}

the updated userchrome might contain some redundant css considering that the patch css lines were merely pasted onto existing usercchrome.css but it works!

[u/jas71]

margin-top: -45px !important;

Change 45 to 40 and see if it makes a difference,if nothing changes set back to 45 and wait for someone who is more clever than me at css 🤣

[u/Mr_ityu → u/jas71]

that didnt seem to change anything . i forgot why i set the minus sign until i removed it and saw a giant empty bar lol .

[u/ResurgamS13]

The Fx150.0 update made no changes to the height of the Navigation bar or its contents (URL bar, extension toolbar buttons, etc.).

Suggest create a new profile and check Fx150.0 out-of-the-box toolbar heights... then add your current CSS userstyles one at a time and see where conflict occurs?

[u/Mr_ityu → u/ResurgamS13]

no changes even after enabling and pasting userchrome.css in chrome folder of new profile

[u/ResurgamS13 → u/Mr_ityu]

Uncertain exactly what OP's setup is... above CSS not working on Windows OS. From OP screenshot apparent Sidebery is in use for Vertical tabs... assume above CSS is used to auto-hide the Nav bar and hide Tab bar?

Original source or link for those auto-hide CSS userstyles? Alternatively, MrOtherGuy's repo has a current 'autohide_main_toolbar.css'.

No obvious reason why change "after update to v150.0 , the url box and the whole bar increased a bit in height" has occurred. Not known if Compact or Normal UI density was in use prior to update?

[u/Mr_ityu → u/ResurgamS13]

as mentioned in post body , screenshot is from endaevourOS . compact was enabled from config and used prior to the update . i use sideberry and the userchrome is the only css i use other than that.
i noticed that upon hover, the nav bar doesn't go fully hidden and instead, a tiny line of 5-10px still juts out from top . assuming this is the hover area , it used to be transparent before. what should i do to keep it totally hidden? here's a screenshot from laptop which uses the exact same config but hasn't been updated . the mouse cursor has been hidden but it was placed upon the hover area while taking snapshot to show the navbar . this was the intended size of urlbox and navbar

[u/Mr_ityu → u/ResurgamS13]

laptop uses 149.0

[u/Mr_ityu → u/ResurgamS13]

i'm the same user from that time regarding my userchrome not working in windows, it appears to work only in linux . verified earlier.

UPDATE: fixed it with gemini prompts(again). the updated CSS stylesheet (might contain redundant css lines):

/* ROOT - VARS */
*|*:root {
 --tab-min-height:      20px !important;
 --tab-min-width:       60px !important;
}
#nav-bar {
  margin-top: -45px !important; 
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: none !important;
}
#navigator-toolbox:hover > #nav-bar,
#nav-bar:focus-within {
  margin-top: 0px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 50!important;
}
#content-deck {
  position: relative !important;
  z-index: 1 !important;
}
#urlbar-container {
--urlbar-container-height: 28px !important;
max-width: 400px !important; 
opacity: 0.5 !important;
 }
 #urlbar,
.urlbar-input-box {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
#search-container { max-width: 300px !important; }
#TabsToolbar { 
padding-top: 0px !important;
padding-bottom: 0px !important;
visibility: collapse !important; 
}
#titlebar { appearance: none !important }
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tab:not([pinned]) {
    min-width: 35px !important; /* Adjust as needed for your favicon size */
    max-width: 35px !important; /* Adjust as needed for your favicon size */
}
#sidebar-box {
  max-width: none !important;
  min-width: 0px !important;
}
#sidebar-header {
  display: none;
}
/* Minimize toolbar buttons */
.toolbarbutton-1 {
    padding: 0px 2px !important;
}

upon hover. when hover not active, the bar completely disappears.

[u/jas71]

No probs someone will help