From 8c63b02d3fdd24ecff856101b5cd57f347f108a7 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 22 Dec 2025 00:00:00 +0900
Subject: [PATCH] Fix: Tab - Vertical layout #1095

---
 css/leptonChrome.css                  | 174 ++++++++++++++++++++++----
 css/leptonChromeESR.css               |  87 +++++++++++--
 src/tab/_container_tab.scss           |  43 +++++--
 src/tab/selected_tab/_box_shadow.scss |   9 +-
 4 files changed, 266 insertions(+), 47 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 7bd0d8c..70fd890 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -7318,13 +7318,22 @@
     box-shadow: unset !important;
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
   }
-  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
+  #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"]
     .tab-background:is([selected], [multiselected])
     .tab-group-line {
-    height: calc(100% + 5px + var(--tab-block-margin));
-    left: calc(-1 * var(--tab-inner-inline-margin));
+    height: calc(100% + 6px + var(--tab-block-margin));
     transform: translateY(-2px);
   }
+  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
+  }
+  #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
+  }
   #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
     box-shadow: unset !important;
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
@@ -9093,12 +9102,16 @@
       }
     }
     /* Pinned Tab */
-    .tabbrowser-tab[pinned] .tab-content::before {
+    .tabbrowser-tab[pinned] .tab-content::before,
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
       transform: translateY(var(--uc-container-position-y));
-      width: 16px;
+      width: 16px !important;
     }
     @media -moz-pref("userChrome.tab.close_button_at_pinned") {
-      .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
+      .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[visuallyselected]:not([busy]):hover
+        .tab-content::before {
         opacity: 0;
       }
     }
@@ -9106,12 +9119,28 @@
       .tabbrowser-tab:is([image], [pinned])[usercontextid]
         > .tab-stack
         > .tab-content[attention]:not([selected])::before,
-      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]
+        > .tab-stack
+        > .tab-content[attention]:not([selected])::before,
+      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected])::before {
         opacity: 0;
       }
       /* Pinned Tab - Titlechanged Indicator override */
       .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
-      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
+      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
         --dotted-identity-image: radial-gradient(
           circle,
@@ -9123,7 +9152,15 @@
         background-position-x: var(--uc-titlechanged-container-position-x) !important;
       }
       .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image]
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
+      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
         background-position-y: top var(--uc-container-position-y) !important;
       }
@@ -9131,25 +9168,51 @@
       .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
         > .tab-content[attention]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
       .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
-        > .tab-content[pinned][titlechanged]:not([selected]) {
+        > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
       }
       :root[uidensity="compact"]
         .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
         > .tab-content[attention]:not([selected]),
+      :root[uidensity="compact"]
+        #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
       :root[uidensity="compact"]
         .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
-        > .tab-content[pinned][titlechanged]:not([selected]) {
+        > .tab-content[pinned][titlechanged]:not([selected]),
+      :root[uidensity="compact"]
+        #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
       }
     }
     @media -moz-pref("userChrome.tab.container.on_top") {
       .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image]
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
+      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
         background-position-y: top var(--uc-container-position-y-bottom) !important;
       }
@@ -22543,13 +22606,22 @@
     box-shadow: unset !important;
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
   }
-  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
+  #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"]
     .tab-background:is([selected], [multiselected])
     .tab-group-line {
-    height: calc(100% + 5px + var(--tab-block-margin));
-    left: calc(-1 * var(--tab-inner-inline-margin));
+    height: calc(100% + 6px + var(--tab-block-margin));
     transform: translateY(-2px);
   }
+  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
+  }
+  #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
+  }
   #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
     box-shadow: unset !important;
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
@@ -24522,24 +24594,44 @@
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) {
-  .tabbrowser-tab[pinned] .tab-content::before {
+  .tabbrowser-tab[pinned] .tab-content::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
     transform: translateY(var(--uc-container-position-y));
-    width: 16px;
+    width: 16px !important;
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") {
-  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
+  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[visuallyselected]:not([busy]):hover
+    .tab-content::before {
     opacity: 0;
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (not (-moz-bool-pref: "userChrome.tab.container.on_top")) {
   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
-  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[image][usercontextid]
+    > .tab-stack
+    > .tab-content[attention]:not([selected])::before,
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[usercontextid]
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected])::before {
     opacity: 0;
   }
   /* Pinned Tab - Titlechanged Indicator override */
   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[image][usercontextid]
+    > .tab-stack
+    > .tab-content[attention]:not([selected]),
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[usercontextid]
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
     --dotted-identity-image: radial-gradient(
       circle,
@@ -24551,7 +24643,15 @@
     background-position-x: var(--uc-titlechanged-container-position-x) !important;
   }
   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[image]
+    > .tab-stack
+    > .tab-content[attention]:not([selected]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
     background-position-y: top var(--uc-container-position-y) !important;
   }
@@ -24559,25 +24659,51 @@
   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
     > .tab-content[attention]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected]),
   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected]) {
+    > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
   }
   :root[uidensity="compact"]
     .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
     > .tab-content[attention]:not([selected]),
+  :root[uidensity="compact"]
+    #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected]),
   :root[uidensity="compact"]
     .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected]) {
+    > .tab-content[pinned][titlechanged]:not([selected]),
+  :root[uidensity="compact"]
+    #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
   }
 }
 @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.container.on_top") {
   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab[image]
+    > .tab-stack
+    > .tab-content[attention]:not([selected]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded])
+    .tabbrowser-tab
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
     background-position-y: top var(--uc-container-position-y-bottom) !important;
   }
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
index fce8c4d..8821e9c 100644
--- a/css/leptonChromeESR.css
+++ b/css/leptonChromeESR.css
@@ -7755,13 +7755,22 @@
     box-shadow: unset !important;
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
   }
-  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
+  #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"]
     .tab-background:is([selected], [multiselected])
     .tab-group-line {
-    height: calc(100% + 5px + var(--tab-block-margin));
-    left: calc(-1 * var(--tab-inner-inline-margin));
+    height: calc(100% + 6px + var(--tab-block-margin));
     transform: translateY(-2px);
   }
+  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
+  }
+  #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
+  }
   #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
     box-shadow: unset !important;
     filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
@@ -9552,12 +9561,16 @@
       }
     }
     /* Pinned Tab */
-    .tabbrowser-tab[pinned] .tab-content::before {
+    .tabbrowser-tab[pinned] .tab-content::before,
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
       transform: translateY(var(--uc-container-position-y));
-      width: 16px;
+      width: 16px !important;
     }
     @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
-      .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
+      .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[visuallyselected]:not([busy]):hover
+        .tab-content::before {
         opacity: 0;
       }
     }
@@ -9565,12 +9578,28 @@
       .tabbrowser-tab:is([image], [pinned])[usercontextid]
         > .tab-stack
         > .tab-content[attention]:not([selected])::before,
-      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]
+        > .tab-stack
+        > .tab-content[attention]:not([selected])::before,
+      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected])::before {
         opacity: 0;
       }
       /* Pinned Tab - Titlechanged Indicator override */
       .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
-      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
+      .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
         --dotted-identity-image: radial-gradient(
           circle,
@@ -9582,7 +9611,15 @@
         background-position-x: var(--uc-titlechanged-container-position-x) !important;
       }
       .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image]
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
+      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
         background-position-y: top var(--uc-container-position-y) !important;
       }
@@ -9590,25 +9627,51 @@
       .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
         > .tab-content[attention]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
       .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
-        > .tab-content[pinned][titlechanged]:not([selected]) {
+        > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
       }
       :root[uidensity="compact"]
         .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
         > .tab-content[attention]:not([selected]),
+      :root[uidensity="compact"]
+        #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
       :root[uidensity="compact"]
         .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
         > .tab-stack
-        > .tab-content[pinned][titlechanged]:not([selected]) {
+        > .tab-content[pinned][titlechanged]:not([selected]),
+      :root[uidensity="compact"]
+        #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
       }
     }
     @supports -moz-bool-pref("userChrome.tab.container.on_top") {
       .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab[image]
+        > .tab-stack
+        > .tab-content[attention]:not([selected]),
+      .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+      #tabbrowser-tabs[orient="vertical"]:not([expanded])
+        .tabbrowser-tab
+        > .tab-stack
+        > .tab-content[titlechanged]:not([selected]) {
         /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
         background-position-y: top var(--uc-container-position-y-bottom) !important;
       }
diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss
index 3043e3e..4f132eb 100644
--- a/src/tab/_container_tab.scss
+++ b/src/tab/_container_tab.scss
@@ -68,12 +68,15 @@
 }
 
 /* Pinned Tab */
-.tabbrowser-tab[pinned] .tab-content::before {
+.tabbrowser-tab[pinned] .tab-content::before,
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
+  left: unset;
   transform: translateY(var(--uc-container-position-y));
-  width: 16px;
+  width: 16px !important;
 }
 @include Option("userChrome.tab.close_button_at_pinned") {
-  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
+  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[visuallyselected]:not([busy]):hover .tab-content::before {
     opacity: 0;
   }
   // Don't hide at userChrome.tab.close_button_at_pinned.background
@@ -81,13 +84,17 @@
 
 @include NotOption("userChrome.tab.container.on_top") {
   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
-  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected])::before {
     opacity: 0;
   }
 
   /* Pinned Tab - Titlechanged Indicator override */
   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), 
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected]) {
     /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
     --dotted-identity-image: radial-gradient(
       circle,
@@ -100,7 +107,9 @@
   }
 
   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]), 
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
     background-position-y: top var(--uc-container-position-y) !important;
   }
@@ -109,26 +118,42 @@
   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
     > .tab-content[attention]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected]), 
   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected]) {
+    > .tab-content[pinned][titlechanged]:not([selected]),
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
   }
   :root[uidensity="compact"]
     .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
     > .tab-content[attention]:not([selected]),
+  :root[uidensity="compact"]
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected]), 
   :root[uidensity="compact"]
     .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected]) {
+    > .tab-content[pinned][titlechanged]:not([selected]),
+  :root[uidensity="compact"]
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
   }
 }
 
 @include Option("userChrome.tab.container.on_top") {
   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
     background-position-y: top var(--uc-container-position-y-bottom) !important;
   }
diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss
index c9be03b..fb9b3b0 100644
--- a/src/tab/selected_tab/_box_shadow.scss
+++ b/src/tab/selected_tab/_box_shadow.scss
@@ -19,11 +19,16 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
   }
 
   /* filter create new stacking context */
-  &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
+  &[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
     height: calc(100% + 6px + var(--tab-block-margin)); // 6px: .tab-group-line's inset-block size
-    left: calc(-1 * var(--tab-inner-inline-margin));
     transform: translateY(-2px); // .tab-group-line 's inset-inline-start size
   }
+  &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
+  }
+  &:not([expanded])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
+  }
 }
 #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
   box-shadow: unset !important;