diff --git a/browser/base/content/tabbrowser-tabs.js b/browser/base/content/tabbrowser-tabs.js
index a421e163bcb2..6fa977cb04ff 100644
--- a/browser/base/content/tabbrowser-tabs.js
+++ b/browser/base/content/tabbrowser-tabs.js
@@ -1328,7 +1328,7 @@
 
     _positionPinnedTabs() {
       let tabs = this._getVisibleTabs();
-      let numPinned = gBrowser._numPinnedTabs;
+      let numPinned = tabs.filter(t => t.pinned).length;
       let doPosition =
         this.getAttribute("overflow") == "true" &&
         tabs.length > numPinned &&
@@ -1343,15 +1343,13 @@
         let uiDensity = document.documentElement.getAttribute("uidensity");
         if (!layoutData || layoutData.uiDensity != uiDensity) {
           let arrowScrollbox = this.arrowScrollbox;
+          let firstTab = tabs[0];
+          let firstTabCS = getComputedStyle(firstTab);
           layoutData = this._pinnedTabsLayoutCache = {
             uiDensity,
-            pinnedTabWidth: tabs[0].getBoundingClientRect().width,
-            scrollStartOffset:
-              arrowScrollbox.scrollbox.getBoundingClientRect().left -
-              arrowScrollbox.getBoundingClientRect().left +
-              parseFloat(
-                getComputedStyle(arrowScrollbox.scrollbox).paddingInlineStart
-              ),
+            pinnedTabWidth: parseFloat(firstTabCS.width),
+            scrollButtonWidth: arrowScrollbox._scrollButtonDown.getBoundingClientRect()
+              .width,
           };
         }
 
@@ -1361,7 +1359,7 @@
           width += layoutData.pinnedTabWidth;
           tab.style.setProperty(
             "margin-inline-start",
-            -(width + layoutData.scrollStartOffset) + "px",
+            -(width + layoutData.scrollButtonWidth) + "px",
             "important"
           );
           tab._pinnedUnscrollable = true;
diff --git a/browser/themes/shared/toolbarbuttons.inc.css b/browser/themes/shared/toolbarbuttons.inc.css
index 79a2f2fdcbdd..e36f47c862b8 100644
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -105,7 +105,6 @@
   width: 12px;
 }
 
-@media not (-moz-proton) {
 #TabsToolbar .toolbarbutton-1,
 #tabbrowser-arrowscrollbox::part(scrollbutton-up),
 #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
@@ -117,7 +116,6 @@
   appearance: none;
   padding: 0 var(--toolbarbutton-inner-padding) !important;
 }
-} /*** END !proton ***/
 
 #navigator-toolbox:not(:hover) #tabbrowser-arrowscrollbox:not([highlight])::part(scrollbutton-down) {
   transition: 1s background-color ease-out;
@@ -134,20 +132,6 @@ toolbar .toolbarbutton-1 {
   -moz-box-pack: center;
 }
 
-@media (-moz-proton) {
-#TabsToolbar .toolbarbutton-1 {
-  margin: 0 0 var(--tabs-navbar-shadow-size) !important;
-}
-
-#tabbrowser-arrowscrollbox::part(scrollbutton-up),
-#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
-  appearance: none;
-  margin: 4px;
-  padding: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 4px);
-  border-radius: var(--tab-border-radius);
-}
-} /*** END proton ***/
-
 @media not (-moz-proton) {
 :root:not([uidensity=compact]) #PanelUI-button {
   padding-inline-start: 5px;
@@ -243,8 +227,6 @@ toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover
 }
 
 #PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active),
-#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover:active,
-#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover:active,
 toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]),
 toolbarbutton.bookmark-item[open="true"],
 toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon,