From c0dca2b348f3e10fda2e89254ddd95fa28097ae0 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 20 Dec 2025 00:00:00 +0900
Subject: [PATCH] Fix: Tab - Vertical tab with tab group #1095

---
 css/leptonChrome.css                  | 28 +++++++++++++++++++++++++++
 css/leptonChromeESR.css               | 14 ++++++++++++++
 src/tab/selected_tab/_box_shadow.scss | 13 +++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 966ea8c..ac04439 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -7311,6 +7311,20 @@
     );
     --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
   }
+  #tabbrowser-tabs:not([noshadowfortests]) {
+    /* filter create new stacking context */
+  }
+  #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));
+  }
+  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    height: calc(100% + 5px + var(--tab-block-margin));
+    left: calc(-1 * var(--tab-inner-inline-margin));
+    transform: translateY(-2px);
+  }
   #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));
@@ -22510,6 +22524,20 @@
     );
     --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
   }
+  #tabbrowser-tabs:not([noshadowfortests]) {
+    /* filter create new stacking context */
+  }
+  #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));
+  }
+  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    height: calc(100% + 5px + var(--tab-block-margin));
+    left: calc(-1 * var(--tab-inner-inline-margin));
+    transform: translateY(-2px);
+  }
   #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));
diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css
index e09a800..6e38098 100644
--- a/css/leptonChromeESR.css
+++ b/css/leptonChromeESR.css
@@ -7748,6 +7748,20 @@
     );
     --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
   }
+  #tabbrowser-tabs:not([noshadowfortests]) {
+    /* filter create new stacking context */
+  }
+  #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));
+  }
+  #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="horizontal"]
+    .tab-background:is([selected], [multiselected])
+    .tab-group-line {
+    height: calc(100% + 5px + var(--tab-block-margin));
+    left: calc(-1 * var(--tab-inner-inline-margin));
+    transform: translateY(-2px);
+  }
   #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));
diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss
index 499d3ef..c9be03b 100644
--- a/src/tab/selected_tab/_box_shadow.scss
+++ b/src/tab/selected_tab/_box_shadow.scss
@@ -12,6 +12,19 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
   --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
 }
 
+#tabbrowser-tabs:not([noshadowfortests]) {
+  .tab-background:is([selected], [multiselected]) {
+    box-shadow: unset !important;
+    filter: $ucTabBasicShadow;
+  }
+
+  /* filter create new stacking context */
+  &[expanded][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
+  }
+}
 #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
   box-shadow: unset !important;
   filter: $ucTabBasicShadow;