Apply styles affecting #tabbrowser-arrowsrollbox to pinned container

chrome/hide_tabs_with_one_tab.css

@@ -14,6 +14,7 @@ This will NOT work correctly if you have hidden tabs such as with tab groups ext
 #TabsToolbar{ min-height: 0px !important }
 
 #tabbrowser-tabs,
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox{ min-height: 0 !important; }
 
 .accessibility-indicator,

chrome/hide_tabs_with_one_tab_w_window_controls.css

@@ -33,6 +33,7 @@ Window controls will be all wrong without it
 #tabbrowser-tabs:not([overflow]) ~ #alltabs-button{ display: none }
 
 #tabbrowser-tabs,
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox{ min-height: 0 !important; }
 
 #TabsToolbar > .titlebar-spacer[type="post-tabs"]{

chrome/shrinking_pinned_tabs.css

@@ -3,16 +3,16 @@ See the above repository for updates as well as full license text. */
 
 /* Makes pinned tab width shrink dynamically, similar to unpinned tab width. */
 
-#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[pinned] {
+:is(#pinned-tabs-container,#tabbrowser-arrowscrollbox:not([overflowing])) .tabbrowser-tab[pinned] {
   flex-grow: 10;
   max-width: 40px;
 }
 
-:root[uidensity="compact"] #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[pinned] {
+:root[uidensity="compact"] :is(#pinned-tabs-container,#tabbrowser-arrowscrollbox:not([overflowing])) .tabbrowser-tab[pinned] {
   max-width: 32px 
 }
 
-#tabbrowser-arrowscrollbox .tab-content[pinned] {
+:is(#pinned-tabs-container,#tabbrowser-arrowscrollbox) .tab-content[pinned] {
   padding: 0px !important;
   justify-content: center;
 }

chrome/tabs_animated_gradient_border.css

@@ -34,7 +34,7 @@ Thanks to /u/skenera on reddit for suggesting animating background position and
   pointer-events: none;
   z-index: 0;
 }
-
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox{
   margin-inline: 0 !important;
   --tab-shadow-max-size: 0px;