Firefox 89 tabs on bottom

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Tabs on bottom for Firefox 89+ */
/* based on https://support.mozilla.org/en-US/questions/1305615
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

#TabsToolbar-customization-target {
  /* Move tabs to the bottom of the "titlebar" */
  display: flex !important;
  position: absolute !important;
  bottom: 0 !important; 
  width: 100vw !important;
}

/* Fix tab width */
#tabbrowser-tabs {
  width: 100vw !important;
}

/* Remove space before first tab */
.titlebar-spacer {
  display: none !important;
}

#nav-bar {
  /* Values used to calculate right margin for navigation bar */
  --window-button-size: 46px;
  --window-button-fullscreen-size: 36px;
  --private-browsing-indicator-size: 48px;
  
/* } 
*|*:root[sizemode="maximized"][tabsintitlebar] #nav-bar,
*|*:root:not([sizemode="maximized"]) #nav-bar { */
  /* Move navication bar to the top (where tabs used to be) */
  margin-top: calc(-1 * var(--tab-min-height)) !important;
}

/* Retain height for tabs toolbar even if it "doesn't contain anything".
 * Important for maximized window with titlebar due to TabsToolbar-customization-target not contributing to TabsToolbar's size and always moving the nagigation bar higher
 * Also needed to make sure the nav bar is always at the correct size for densities other than compact. Better option is probably to fix the minimize/maximize/close button height
 */
#TabsToolbar {
  height: var(--tab-min-height) !important;
}

.titlebar-buttonbox-container {
  /* --urlbar-min-height 32 default 26 compact 34 touch, --urlbar-container-height 40 normal 34 compact 44 touch */
/*   height: var(--urlbar-container-height) !important; */
}

/* Expand navigator-toolbox to make extra room for the tabs */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important;
  padding-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important; 
}

/* Choose the right margin for nav-bar based on whether we are in fullscreen and whether the icon for private browsing is visible */
*|*:root[tabsintitlebar][privatebrowsingmode=temporary]
#nav-bar:not([inFullscreen]) {
  margin-right: calc(3 * var(--window-button-size) + var(--private-browsing-indicator-size)) !important;
}
*|*:root[tabsintitlebar]:not([privatebrowsingmode=temporary])
#nav-bar:not([inFullscreen]) {
  margin-right: calc(3 * var(--window-button-size)) !important;
}
*|*:root[privatebrowsingmode=temporary]
#nav-bar[inFullscreen] {
  margin-right: calc(3 * var(--window-button-fullscreen-size) + var(--private-browsing-indicator-size)) !important;
}
*|*:root:not([privatebrowsingmode=temporary])
#nav-bar[inFullscreen] {
  margin-right: calc(3 * var(--window-button-fullscreen-size)) !important;
}


/* Fix dot position under pinned tab icon when compact Density is used */
*|*:root[uidensity=compact]  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
*|*:root[uidensity=compact] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  background-position: center bottom calc(2.5px + var(--tabs-navbar-shadow-size)) !important;
}