--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -454,16 +454,21 @@ notification[value="translation"] menuli
   background-color: var(--toolbar-bgcolor);
   color: var(--toolbar-color, -moz-DialogText);
 }
 
 /* Tabstrip */
 
 %include ../shared/tabs.inc.css
 
+/* Hide the first tab separator when maximized */
+:root:not([sizemode="normal"]) .tabbrowser-tab[first-visible-tab] {
+  margin-inline-start: 0 !important;
+}
+
 #tabbrowser-tabs {
   /* override the global style to allow the selected tab to be above the nav-bar */
   z-index: auto;
 }
 
 #TabsToolbar {
   min-height: 0;
 }

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -580,23 +580,31 @@
 
 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
   background-color: rgba(255,255,255,.2);
 }
 
 /* Pinned tabs */
 
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
-#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after,
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
   position: absolute;
   top: 0;
   bottom: 0;
+}
+
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
   right: 0;
 }
 
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
+  left: 0;
+}
+
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]:-moz-locale-dir(rtl)::after {
   right: unset;
   left: 0;
 }
 
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] > .tab-stack {
   border-inline-end: 1px solid transparent;
 }
@@ -630,21 +638,16 @@
 @media (max-width: 500px) {
   .titlebar-placeholder[type="post-tabs"] {
     display: none;
   }
 }
 
 /* Tab separators */
 
-.titlebar-placeholder[type="pre-tabs"] {
-  border-inline-end: 1px solid;
-  opacity: 0.2;
-}
-
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
   border-left: 1px solid;
   margin-top: 5px;
   margin-bottom: 4px;
   opacity: 0.3;
 }
 
@@ -657,43 +660,61 @@
  * scaling factors on Windows, because of bug 477157.
  */
 .tabbrowser-tab::before {
   margin-inline-start: -1px;
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
 :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before,
 %else
 :root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before,
 %endif
 /* Show full height tab separators on hover. */
 .tabbrowser-tab:hover::after,
-#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after {
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after,
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[first-visible-tab]:hover::before {
   margin-top: var(--tabs-top-border-width);
   margin-bottom: 0;
 }
 
 /* Show full height tab separators on selected tabs. */
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after,
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[first-visible-tab][visuallyselected]::before,
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before,
 .tabbrowser-tab[visuallyselected]::after {
   border-color: var(--tabs-border-color);
   margin-top: 0;
   margin-bottom: @navbarTabsShadowSize@;
   opacity: 1;
 }
 
 .tabbrowser-tab::after,
+.tabbrowser-tab[first-visible-tab]::before,
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {
   content: "";
   display: -moz-box;
 }
 
+/* The first tab separator takes up 1px of space. When dragging the first tab out of
+ * the first position, a background tab slides in to take its place. When the first
+ * tab separator appears for the incoming new first-tab, it causes a 1px jump.
+ * to avoid this, we set a -1px margin-inline-start on the first tab separator,
+ * and a 1px margin-inline-start on the first tab so that it stays visible. */
+.tabbrowser-tab[first-visible-tab]::before {
+  margin-inline-start: -1px;
+}
+
+:root:not([inFullscreen])[tabsintitlebar] .tabbrowser-tab[first-visible-tab] {
+  margin-inline-start: 1px;
+}
+
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   list-style-image: url(chrome://browser/skin/arrow-left.svg);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -691,16 +691,21 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 
 #TabsToolbar {
   min-height: 0;
   padding: 0;
 }
 
 %include ../shared/tabs.inc.css
 
+/* Hide the first tab separator when maximized */
+:root:not([sizemode="normal"]) .tabbrowser-tab[first-visible-tab] {
+  margin-inline-start: 0 !important;
+}
+
 @media (-moz-windows-default-theme: 0) {
   /* For high contrast themes. */
   #tabbrowser-tabpanels,
   :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
     background-color: -moz-default-background-color;
   }
 }