Does it look right if you remove the code you posted above from userChrome.css ?

Unfortunately not, then the tabs will be above the address bar. And I want them to be below, as it is now, but so that the active tab will be within the panel, like it was before update.

After the last update, it began to crawl beyond the borders even more :(

You can try the code I posted in this thread:

• https://support.mozilla.org/en-US/questions/1280813

Does it make a difference if you enable the title bar or try other density settings in the Customize window ?

Is the code you posted above the only code you use in userChrome.css for the tab bar or do you have other code that sets a height to tab bar ?

If I turn on the Title Bar it gets better (screenshot). If I use your code, then everything looks fine, but only if the Title Bar is enabled (screenshot).

I couldn’t use the additional tabs-on-bottom.css file - if I add entries with regards to the tabs, it seems like this does not work. Also I tried to swap some lines to change the order of processing, but that didn't seem to help.

Contents of my userChrome.css:

#menu_pocket, #menu_pocketSeparator, #panelMenu_pocket, #BMB_pocket, -#BMB_pocketSeparator { display:none !important; }
-#context-savelinktopocket, #context-pocket { display:none!important; }

-#context-back image,
-#context-forward image,
-#context-reload image,
-#context-stop image,
-#context-bookmarkpage image,
-#context-navigation,
-#context-sep-navigation {
    display:none !important;
}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}

#navigator-toolbox {
  display: flex;
  flex-direction: column;
}

#titlebar {
  order: 2;
}

#tabbrowser-tabs {
  --tab-min-height: 18px !important;
  margin-left: 0px !important;
  height: 15px !important;
}

:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  font-size: 11px !important;
  min-height: 20px !important;
}

:root[uidensity=compact] #identity-box {
  max-height: 20px;
}

:root[uidensity=compact] #nav-bar .toolbarbutton-1 {
  padding: 0px !important;
}

/* Compatibility with auto-hide.css */
:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 20px !important;
}

#nav-bar {
  border-top: 0 !important;
}

toolbar#TabsToolbar
{
    -moz-appearance: none !important;
    background-color: #535556 !important;
}

Try to combine your previous code with code that sets the height to elements for the Tab bar.

/* titlebar container (menu and tabs) on bottom */
#navigator-toolbox {
  display: flex;
  flex-direction: column;
}

#titlebar {
  order: 2;
}

/* tabs height */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px; /* fix for full screen mode */
 --tab-min-height: 25px;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

Thank you!