From c4204167cdab0d3fba3ffc34d66de6dfc54dfdd4 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <john.pankov@gmail.com>
Date: Sat, 13 Mar 2021 22:08:20 +0100
Subject: [PATCH] make tab close button not take up extra space - fixes #3502

---
 terminus-core/src/components/tabHeader.component.scss | 10 ++++++++++
 terminus-core/src/theme.scss                          |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/terminus-core/src/components/tabHeader.component.scss b/terminus-core/src/components/tabHeader.component.scss
index b6b8140e..7ec8a303 100644
--- a/terminus-core/src/components/tabHeader.component.scss
+++ b/terminus-core/src/components/tabHeader.component.scss
@@ -58,6 +58,9 @@ $tabs-height: 38px;
         opacity: 0;
         -webkit-app-region: no-drag;
 
+        position: absolute;
+        right: 0;
+
         $button-size: 26px;
         width: $button-size;
         height: $button-size;
@@ -73,6 +76,13 @@ $tabs-height: 38px;
         }
     }
 
+    &:hover .name {
+        -webkit-mask-image: linear-gradient(black 0 0), linear-gradient(to left, transparent 0%, black 100%);
+        -webkit-mask-size: calc(100% - 60px) auto, 60px auto;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: left, right;
+    }
+
     &:hover button {
         transition: 0.25s opacity;
         display: block;
diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss
index f8a4ea1e..4c81d439 100644
--- a/terminus-core/src/theme.scss
+++ b/terminus-core/src/theme.scss
@@ -66,7 +66,9 @@ app-root  {
                         border: none;
                         transition: 0.25s all;
 
-                        &:hover { background: $button-hover-bg !important; }
+                        right: 5px;
+
+                        &:hover { background: $button-active-bg !important; }
                         &:active { background: $button-active-bg !important; }
                     }