You can check if there is an update available from the creator of your CSS code, there might be a link in the code where you can get the latest version.

• https://www.userchrome.org/what-is-userchrome-css.html

You can set this pref to false in about:config to disable userChrome.css and userContent.css.

• about:config => toolkit.legacyUserProfileCustomizations.stylesheets => false
• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

This worked for me:

/* TABS on bottom */

1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {

-moz-box-ordinal-group: 10;

}

1. TabsToolbar {

-moz-box-ordinal-group: 1000 !important;

}

1. TabsToolbar {

display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {

padding-bottom: var(--tab-min-height) !important;

}

1. tabbrowser-tabs {

width: 100vw !important;

}

1. TabsToolbar #window-controls {

display: none !important;

}

Cor-el - Last update regarding tabs on userChrome.org was the one I used for versions before 133, that's stopped working.

Minnie - When I copined your recommendation, the "1. " in front of some lines didn't copy. Do they need to be there? Tried pasting your recommendation into userChrome.css without them and the tabs still come out on top. Did you change anything else, besides adding the code you suggested?

Cor-el - Last update regarding tabs on userChrome.org was the one I used for versions before 133, that's stopped working.

Sorry, I don't maintain code for moving tabs because it changes too often. You can try code you find here, or one of these two major repositories:

• MrOtherGuy: https://github.com/MrOtherGuy/firefox-csshacks
• Aris: https://github.com/Aris-t2/CustomCSSforFx/

For personal assistance with userChrome.css questions, I suggest this subreddit: https://www.reddit.com/r/FirefoxCSS/

As for why there need to be changes at all, the Firefox interface was built using proprietary code rather than standard HTML and CSS, and over time, they are modernizing different parts of it. For custom CSS purposes, it certainly would have been convenient if that were done all at once, but too late now.

This code in userChrome.css should be sufficient in current (and some older) releases.

/* TABS: POSITION - below NavBar */
#TabsToolbar {
  /*display: block !important; */ /* not needed in 113+ */
  position: absolute !important;
  bottom: 0;
  width: 100vw !important;
}

/*[65-107]*//* #tabbrowser-tabs {width: 100vw !important;} */

/* navigator-toolbox: PADDING - reserve space */
:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important; /*89+*/
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important; /*OPTIONAL*/
}

/* Window Controls */
#TabsToolbar #window-controls {display: none !important;}

/* INDICATORS - HIDE */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

Cor-el - That did the trick! Thank you very much.

Minnie - When I copined your recommendation, the "1. " in front of some lines didn't copy. Do they need to be there?

That's a quirk of the markup this forum uses. If you type a line starting with a hash (#) it thinks you are starting a numbered list and changes it to "1." You need to change the "1."s to "#"s

To make a line like "#tabbrowser-tabs {" display correctly you actually need to type "#tabbrowser-tabs {"