Refactor tab styling and layout for pinned tabs

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 3b97732d8035f07a2308f76f235702c70a5fa388..fea1a6424de65c15db895ce3cf95e699fbf3952c 100644
+index 3b97732d8035f07a2308f76f235702c70a5fa388..bed86f3014a239b4e7d50504d4b0bf457da3500c 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -552,19 +552,36 @@
@@ -144,6 +144,23 @@ index 3b97732d8035f07a2308f76f235702c70a5fa388..fea1a6424de65c15db895ce3cf95e699
            // Ignore underflow events:
            // - from nested scrollable elements
            // - for vertical orientation
+@@ -1471,11 +1509,11 @@
+         for (let i = numPinned - 1; i >= 0; i--) {
+           let tab = tabs[i];
+           width += layoutData.pinnedTabWidth;
+-          tab.style.setProperty(
+-            "margin-inline-start",
+-            -(width + layoutData.scrollStartOffset) + "px",
+-            "important"
+-          );
++          //tab.style.setProperty(
++          //  "margin-inline-start",
++          //  -(width + layoutData.scrollStartOffset) + "px",
++          //  "important"
++          //);
+           tab._pinnedUnscrollable = true;
+         }
+         this.style.setProperty(
 @@ -1510,19 +1548,30 @@
          }
        }

src/browser/themes/shared/tabbrowser/tabs-css.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index eb92f71e5942a19618fd74492354de78ac03bacf..28d23667991c9feff7a379acaa5f7c7928fb14cf 100644
+index 9a915ff442cc7f01ddec3fcea931c21e210cac92..82685b07499e919e2cc3aa3b0a35b8f35f3d56cb 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
-@@ -67,7 +67,7 @@
+@@ -39,7 +39,7 @@
  
  #tabbrowser-tabs {
    --tab-min-width: 76px;
@@ -11,7 +11,34 @@ index eb92f71e5942a19618fd74492354de78ac03bacf..28d23667991c9feff7a379acaa5f7c79
    --tab-overflow-pinned-tabs-width: 0px;
    padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
    /* Use a bigger flex value than the searchbar to prevent it from
-@@ -618,6 +618,7 @@
+@@ -103,7 +103,7 @@
+    * (we only have 2px padding in the inline direction) */
+   overflow-clip-margin: 2px;
+ 
+-  &:not([pinned]) {
++  & {
+     flex: 100 100;
+     max-width: 225px;
+     min-width: var(--tab-min-width);
+@@ -126,7 +126,7 @@
+     flex-shrink: 0;
+ 
+     #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > & {
+-      position: absolute !important;
++      /*position: absolute !important;*/
+       display: block;
+     }
+   }
+@@ -627,7 +627,7 @@
+ 
+ #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
+   /* Add a gap between the last pinned tab and the first visible tab */
+-  margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */
++  margin-inline-start: 0 !important; /* .tabbrowser-tab sets margin: 0 !important; */
+ }
+ 
+ .tab-label[attention]:not([selected]) {
+@@ -737,6 +737,7 @@
  .titlebar-spacer[type="pre-tabs"],
  .titlebar-spacer[type="post-tabs"] {
    width: 40px;
@@ -19,7 +46,7 @@ index eb92f71e5942a19618fd74492354de78ac03bacf..28d23667991c9feff7a379acaa5f7c79
  }
  
  @media (max-width: 500px) {
-@@ -633,7 +634,7 @@
+@@ -752,7 +753,7 @@
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)
  ) + #tabbrowser-tabs {

src/browser/themes/shared/zen-browser-shared.css

@@ -330,18 +330,37 @@ toolbarbutton#scrollbutton-up {
   display: none;
 }
 
-@media (-moz-bool-pref: "zen.tabs.vertical") { 
-  .tabbrowser-tab[pinned] {
-    /* Add a gap between the last pinned tab and the first visible tab */
-    margin-inline-start: 12px !important;
-  }
-}
-
 .tabbrowser-tab:is([multiselected="true"], [selected]) {
   /*border-color: light-dark(var(--zen-colors-border), rgba(255, 255, 255, 0.15));*/
   background: var(--toolbarbutton-hover-background);
 }
 
+.tabbrowser-tab {
+  margin-inline-start: 0 !important;
+  margin: 0 auto !important;
+}
+
+.tabbrowser-tab[pinned] {
+  position: relative !important;
+}
+
+.tabbrowser-tab:nth-last-child(1 of [pinned]) {
+  margin-bottom: 5px !important;
+  position: relative;
+  overflow: visible;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 1.5px;
+    border-radius: 1px;
+    background: var(--zen-colors-border);
+  }
+}
+
 .tab-close-button {
   position: absolute;
   display: none;