From 5c4f29445cdcf9411d3b7bc02e36f89c0ea47497 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 15 Mar 2022 10:03:54 +0300
Subject: [PATCH] Adding shadow corners to scrollable area

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/dock/dock-tabs.module.scss     | 19 +++++++++++++++++++
 src/renderer/components/dock/dock-tabs.tsx    |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/dock/dock-tabs.module.scss b/src/renderer/components/dock/dock-tabs.module.scss
index cc5c93c499..49fd9362cb 100644
--- a/src/renderer/components/dock/dock-tabs.module.scss
+++ b/src/renderer/components/dock/dock-tabs.module.scss
@@ -29,6 +29,25 @@
         background-color: rgba(106, 115, 125, 0.2);
       }
     }
+
+    > div {
+      &::before, &::after {
+        content: "\00A0";
+        position: sticky;
+        min-width: 8px;
+        z-index: 1;
+      }
+
+      &::before {
+        left: 0;
+        background: linear-gradient(270deg, transparent 0%, var(--dockHeadBackground) 65%);
+      }
+
+      &::after {
+        right: 0;
+        background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 65%);
+      }
+    }
   }
 
   > div {
diff --git a/src/renderer/components/dock/dock-tabs.tsx b/src/renderer/components/dock/dock-tabs.tsx
index c88f6312c3..70f7365b07 100644
--- a/src/renderer/components/dock/dock-tabs.tsx
+++ b/src/renderer/components/dock/dock-tabs.tsx
@@ -47,8 +47,8 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
   };
 
   const updateScrollbarVisibility = () => {
-    const allTabs = Array.from(elem.current?.querySelectorAll(".Tabs .Tab"));
-    const allTabsShrinked = allTabs.every(tab => tab.clientWidth == minTabSize.current);
+    const allTabs: HTMLElement[] = Array.from(elem.current?.querySelectorAll(".Tabs .Tab"));
+    const allTabsShrinked = allTabs.every(tab => tab.offsetWidth == minTabSize.current);
 
     setShowScrollbar(allTabsShrinked);
   };