Set tabs scrollable on small window sizes

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

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

@@ -6,10 +6,16 @@
 .DockTab {
   padding: var(--padding);
   height: 32px;
-  margin-right: 4px;
   position: relative;
   background: no-repeat left 50% linear-gradient(0deg, #43424d, #43424d);
   background-size: 1px 3ch;
+  overflow: hidden;
+
+  /* Allow tabs to shrink and take all parent space */
+  min-width: var(--min-tab-width);
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: fit-content;
 
   &.pinned {
     padding-right: var(--padding);

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

@@ -4,5 +4,12 @@
  */
 
 .dockTabs {
+  --min-tab-width: 120px;
+
   display: flex;
-}
+  overflow: hidden;
+
+  > div {
+    width: 100%;
+  }
+}

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

@@ -5,13 +5,15 @@
 
 import styles from "./dock-tabs.module.scss";
 
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { Icon } from "../icon";
 import { Tabs } from "../tabs/tabs";
 import { DockTab } from "./dock-tab";
 import type { DockTab as DockTabModel } from "./dock/store";
 import { TabKind } from "./dock/store";
 import { TerminalTab } from "./terminal/dock-tab";
+import { useResizeObserver } from "../../hooks";
+import { cssVar } from "../../utils";
 
 export interface DockTabsProps {
   tabs: DockTabModel[];
@@ -21,6 +23,10 @@ export interface DockTabsProps {
 }
 
 export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabsProps) => {
+  const elem = useRef<HTMLDivElement>();
+  const minTabSize = useRef<number>(0);
+  const [showScrollbar, setShowScrollbar] = useState<boolean>(false);
+
   const renderTab = (tab?: DockTabModel) => {
     if (!tab) {
       return null;
@@ -40,18 +46,31 @@ 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);
+
+    setShowScrollbar(allTabsShrinked);
+  };
+
+  useEffect(() => {
+    const cssVars = cssVar(elem.current);
+
+    minTabSize.current = cssVars.get("--min-tab-width").valueOf();
+  });
+
+  useResizeObserver(elem.current, updateScrollbarVisibility);
+
   return (
-    <div className={styles.dockTabs}>
+    <div className={styles.dockTabs} ref={elem}>
-      <div>
+      <Tabs
-        <Tabs
+        autoFocus={autoFocus}
-          className="DockTabs"
+        value={selectedTab}
-          autoFocus={autoFocus}
+        onChange={onChangeTab}
-          value={selectedTab}
+        scrollable={showScrollbar}
-          onChange={onChangeTab}
+      >
-        >
+        {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
-          {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
+      </Tabs>
-        </Tabs>
-      </div>
     </div>
   );
 };