From 9276283311f46a146d1ea97a47041f3b3edce0a5 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sun, 28 May 2023 06:39:08 +0300 Subject: [PATCH] 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 | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/chrome/toolbarbuttons_in_tabs_periphery.css b/chrome/toolbarbuttons_in_tabs_periphery.css index 9192238..e8dd9f2 100644 --- a/chrome/toolbarbuttons_in_tabs_periphery.css +++ b/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; }