Controls scrollable within Tabs

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/dock-tabs.module.scss

@@ -6,12 +6,18 @@
 .dockTabs {
   --min-tab-width: 120px;
 
+  overflow: hidden;
+}
+
+.tabs {
+  width: 100%;
+
   display: flex;
   overflow: hidden;
 
-  &.scrollable {
+  &:global(.scrollable) {
     overflow: auto;
-    overflow-x: overlay;
+    overflow-x: overlay;  /* Set scrollbar inside content area */
 
     &::-webkit-scrollbar-thumb {
       background-color: transparent;
@@ -30,27 +36,21 @@
       }
     }
 
-    > div {
-      &::before, &::after {
-        content: "\00A0";
-        position: sticky;
-        min-width: 8px;
-        z-index: 1;
-      }
+    &::before, &::after {
+      content: "\00A0";
+      position: sticky;
+      min-width: 8px;
+      z-index: 1;
+    }
 
-      &::before {
-        left: 0;
-        background: linear-gradient(270deg, transparent 0%, var(--dockHeadBackground) 65%);
-      }
+    &::before {
+      left: 0;
+      background: linear-gradient(270deg, transparent 0%, var(--dockHeadBackground) 65%);
+    }
 
-      &::after {
-        right: 0;
-        background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 65%);
-      }
+    &::after {
+      right: 0;
+      background: linear-gradient(90deg, transparent 0%, var(--dockHeadBackground) 65%);
     }
   }
-
-  > div {
-    width: 100%;
-  }
 }

src/renderer/components/dock/dock-tabs.tsx

@@ -12,7 +12,7 @@ import type { DockTab as DockTabModel } from "./dock/store";
 import { TabKind } from "./dock/store";
 import { TerminalTab } from "./terminal/dock-tab";
 import { useResizeObserver } from "../../hooks";
-import { cssNames, cssVar } from "../../utils";
+import { cssVar } from "../../utils";
 
 export interface DockTabsProps {
   tabs: DockTabModel[];
@@ -65,12 +65,13 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
   useResizeObserver(elem.current, updateScrollbarVisibility);
 
   return (
-    <div className={cssNames(styles.dockTabs, { [styles.scrollable]: showScrollbar })} ref={elem}>
+    <div className={styles.dockTabs} ref={elem}>
       <Tabs
         autoFocus={autoFocus}
         value={selectedTab}
         onChange={onChangeTab}
-        scrollable={false}
+        scrollable={showScrollbar}
+        className={styles.tabs}
       >
         {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
       </Tabs>