How to make pinned tabs always display in a row even when hidden

[sgjohnson1981]

I use a tiny sliver of pixels for the TST sidebar and expand it when hovering, all via CSS. But for some reason when it's hidden the pinned tabs stack on top of each other instead of staying in the top row. So when I hover it takes a few seconds for the below tabs to adjust to the pinned tabs realigning and I keep clicking on the wrong tab because they suddenly shift under my cursor and I forget to wait a second. Is there a way to get pinned tabs to stay in the top row all the time, not just when hidden?

/* --- Scrollable urlbar */
#urlbar-results {
    height: unset !important;
    max-height: 480px !important;
    overflow-y: auto !important;
}
#urlbarView-body-outer {
    padding-bottom: 1px !important;
}

/* --- Make the new type icons scrollable */
#urlbarView .urlbarView-type-icon {
    position: relative !important;
    left: -24px;
    margin-right: -20px;
}
/* END Make the new type icons scrollable --- */
/* END Scrollable urlbar --- */

/* Disable new Megabar in Mozilla Firefox - Start */
#urlbar[breakout][breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation-name: none !important;
box-shadow: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
width: 100% !important;
padding-block: 0 !important;
padding-inline: 0 !important;
transition: none !important;
}
#urlbarView {
margin-inline: 0 !important;
width: 100% !important;
}
#urlbarView-row {
padding-block: 0 !important;
}
#urlbarView-type-icon {
min-width: 16px !important;
height: 16px !important;
margin-bottom: 0 !important;
margin-inline-start: 0 !important;
}
#urlbarView-favicon {
margin-inline-start: 25px !important;
}
}
/* Disable new Megabar in Mozilla Firefox - End */

/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
    opacity: 0;
    pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    background-color: rgb(43,43,51);
    visibility: collapse !important;
}

/* Sidebar min and max width removal */
#sidebar {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 3px;
    --wide-tab-width: 500px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 100ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 200ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 1;

[sgjohnson1981]

I guess the setting I found is the appropriate solution unless something goes wrong if I go above a number that is too high for the expanded width. When I set "Show X or less tabs per row (*0 or less means auto-calculation)" to something besides 0 the auto-calculation is turned off. So I guess that shifting is how auto-calculation was designed to work. Anyone else is welcome to add to the discussion if they know a better solution.