From f622348b6c700bd486ef391dc08793f0615d91e9 Mon Sep 17 00:00:00 2001
From: DmitriyNoa <dmytro.zharkov@gmail.com>
Date: Tue, 25 Jan 2022 16:25:44 +0100
Subject: [PATCH] Fix right button

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>
---
 src/renderer/components/dock/dock-tabs.tsx | 9 ++++-----
 src/renderer/components/dock/dock.scss     | 4 ++++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/dock/dock-tabs.tsx b/src/renderer/components/dock/dock-tabs.tsx
index 70568da0f7..1b90766489 100644
--- a/src/renderer/components/dock/dock-tabs.tsx
+++ b/src/renderer/components/dock/dock-tabs.tsx
@@ -27,7 +27,7 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
   const scrollStep = 200;
 
   const scrollToRight = (): void => {
-    if(!elem) return;
+    if(!elem || scrollPosition + scrollStep > contentWidth) return;
     const scroll = scrollPosition + scrollStep;
 
     setScrollPosition(scroll);
@@ -35,7 +35,6 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
     elem.current.scrollLeft = scroll;
   };
 
-
   const scrollToLeft = (): void => {
     if(!elem) return;
     const scroll = scrollPosition - scrollStep;
@@ -57,7 +56,7 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
     return scrollPosition > scrollStep;
   };
 
-  const updateScrollPosition = ( evt: UIEvent<HTMLDivElement>) => {
+  const updateScrollPosition = ( evt: UIEvent<HTMLDivElement>): void => {
     const position = evt.currentTarget.scrollLeft;
 
     if (position!== undefined) {
@@ -65,7 +64,7 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
     }
   };
 
-  const onWindowResize = () => {
+  const onWindowResize = (): void => {
     if(!elem || !contentElem) return;
 
     setContentWidth(contentElem.current.clientWidth);
@@ -108,7 +107,7 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
   }, []);
 
   return (
-    <div style={{ overflow: "hidden" }} className={"flex gaps align-center"}>
+    <div className={"tabs-wrapper flex gaps align-center"}>
       {isScrollableLeft() && (
         <Icon
           material="keyboard_arrow_left"
diff --git a/src/renderer/components/dock/dock.scss b/src/renderer/components/dock/dock.scss
index 255ff2fcfc..ba9be598a0 100644
--- a/src/renderer/components/dock/dock.scss
+++ b/src/renderer/components/dock/dock.scss
@@ -58,6 +58,10 @@
     }
   }
 
+  .tabs-wrapper {
+    overflow: hidden;
+  }
+
   .tab-content {
     position: relative;
     flex: 1;