Tab reordering works with multi row tabs?

Not sure what's going on but a variant of Firefox (Cachy) seems to work with the chrome css of multi-row tabs. I do not understand why. Is it because of the indicator that browser uses? Can this be made to work on the stock Firefox?
Indicator in question.
Demo. cachy
userChrome.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */

:root{
    --multirow-n-rows: 40;
    --multirow-tab-min-width: 64px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */

/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */

/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

@-moz-document url(chrome://browser/content/browser.xhtml){
  #scrollbutton-up~spacer,
  #scrollbutton-up,
  #scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }

  scrollbox[part][orient="horizontal"]{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
    scrollbar-color: currentColor transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scroll-snap-type: y mandatory;
  }
}

.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
  overflow: -moz-hidden-unscrollable;
  display: inline;
  --scrollbutton-display-model: none;
}

.tabbrowser-tab{ scroll-snap-align: start; }

#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width) !important;
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }

#tabbrowser-tabs[hasadjacentnewtabbutton][overflow] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
  display: flex !important;
  align-items: center; /* Fx <112 compatibility */
}

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_popup_full_width.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Make urlbar popup appear full size like it did before urlbar re-design */

/* Temporary dummy variables, can probably be removed when Fx92 releases */
:root{
  --toolbar-field-background-color: var(--toolbar-field-non-lwt-bgcolor);
  --toolbar-field-focus-background-color: var(--lwt-toolbar-field-focus,Field);
}
:root:-moz-lwtheme{
  --toolbar-field-background-color: var(--lwt-toolbar-field-background-color);
}

.urlbarView-row-inner{
   /* This sets how far the dropdown-items are from window edge */
  padding-inline-start: 6px !important;
}

#urlbar-container,
#urlbar{
  position: static !important;
  display: flex !important;
}
#urlbar{
  height: auto !important;
  width: auto !important;
  box-shadow: inset 0 0 0 1px var(--toolbar-field-border-color, hsla(240,5%,5%,.25));
  background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8));
  border-radius: var(--toolbarbutton-border-radius);
  --uc-urlbar-min-width: none; /* navbar_tabs_oneliner.css compatibility */
}

#urlbar,
#urlbar-background,
#urlbar-input-container,
.urlbarView{
  flex-grow: 1; /* Fx <112 compatibility */
}

#urlbar[focused]{ box-shadow: inset 0 0 0 1px var(--toolbar-field-focus-border-color, highlight); }

.urlbarView{
  position: absolute !important;
  margin: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  border-width: 1px 0;
  top: var(--urlbar-toolbar-height);
  background-color: var(--toolbar-field-focus-background-color, inherit);
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

#urlbar > #urlbar-input-container{ padding: 0px !important; width: auto !important; height: auto !important; }
#urlbar > #urlbar-background{ display: none !important; }

/* This may seem pretty weird, but it gets around an issue where the height of urlbar may suddenly change when one starts typing into it */
/* If you are otherwise modifying the urlbar height then you might need to modify the height of this too */
#urlbar > #urlbar-input-container::before{ content: ""; display: flex; height: 24px; }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/minimal_in-UI_scrollbars.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Changes various in-UI scrollabars to be slim and more subtle */

.panel-subview-body,
#permList,
scrollbar{
 color: inherit;
 scrollbar-color: currentColor transparent;
 scrollbar-width: thin 
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/loading_indicator_bouncing_line.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Shows a left-right bouncing line at the top of the content area during navigation */

@keyframes statusline-anim{from{background-position-x: left}to{background-position-x: right}}
#statuspanel[type="status"]::after{
  position: fixed;
  display: block;
  height: 2px;
  width: 100vw;
  top: 0;
  left:0;
  content: "";
  pointer-events: none;
  background-size: 20%;
  background-repeat: no-repeat;
  background-image: linear-gradient(to left,transparent,rgb(170,0,70),transparent);
  animation: statusline-anim 400ms alternate infinite ease-in-out;
}

@media (min-width: 1000px){ #statuspanel[type="status"]::after{ animation-duration: 460ms } }
@media (min-width: 1400px){ #statuspanel[type="status"]::after{ animation-duration: 520ms } }
@media (min-width: 1700px){ #statuspanel[type="status"]::after{ background-size: 15%; animation-duration: 550ms } }
@media (min-width: 2200px){ #statuspanel[type="status"]::after{ animation-duration: 600ms } }
.browserContainer{ transform: translate(0) }

/* Source link https://www.reddit.com/r/firefox/comments/y81r8e/does_anyone_know_how_to_remove_the_private/
Removes the "Private browsing" text taking up space. */

#private-browsing-indicator-with-label>label, .titlebar-spacer[type="post-tabs"] { display: none !important; }
Not sure how this feature came to be.
MrOtherGuy / firefox-csshacks

Tab reordering works with multi row tabs? #375
