tabs periphery toolbarbuttons: add workaround to not trigger overflow

This adds a 2px margin to periphery which acts as buffer-zone so when
a tab is added or removed the layout won't immediately cause
overflow-mode to activate

chrome/toolbarbuttons_in_tabs_periphery.css

@@ -20,10 +20,24 @@ Any button to the right of the flexible space is pushed to the right edge.
   --uc-scrollbox-containment: none;
   max-width: max-content;
   overflow: hidden;
+  margin-inline-end: -2px;
 }
 .tabbrowser-tab:not([pinned]){
   width: 225px;
 }
+/* This margin is added to create "buffer-space"
+   Without it, opening and closing tabs will briefly
+   make tabs overflow which looks jarring.
+   The -2px margin on #tabbrowser-tabs is related to this as well so tabs-newtab-button isn't separated too far. */
+#tabbrowser-arrowscrollbox-periphery{
+  margin-inline-start: 2px;
+}
+#tabs-newtab-button{
+  transform: translateX(-2px);
+}
+.closing-tabs-spacer{
+  display: none !important;
+}
 .scrollbox-clip[orient="horizontal"]{
   contain: var(--uc-scrollbox-containment,initial) !important;
 }