From a979c62f35901246d9bd480689a4b36100b6f74d Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Thu, 4 Nov 2021 12:55:03 +0100
Subject: [PATCH] fixed scroll. todo@ icon should be hidden if scroll is hidden

---
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.css |  1 -
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx | 25 +++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
index e1d398360e..7df5e07993 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
@@ -43,7 +43,6 @@
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
-    max-width: 1000px;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index 9ebcc05e8e..5efc17aaca 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -62,15 +62,24 @@ export const TabsUI = (props: TabsUIProps) => {
   }, [])
 
   return (
-    <div className="remix-ui-tabs border-0 header nav-tabs">
-      <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
-        <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
-        <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
+    <div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs">
+      <div className="d-flex flex-row" style={ { maxWidth: 'fit-content', width: '97%' } }>
+        <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
+          <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
+          <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
+        </div>
+        <Tabs
+          className="tab-scroll"
+          selectedIndex={selectedIndex}
+          onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }}
+        >
+          <TabList className="d-flex flex-row justify-content-center align-items-center">
+            {props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}
+          </TabList>
+          {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
+        </Tabs>
       </div>
-      <Tabs className="tab-scroll" selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} >
-        <TabList className="d-flex flex-row justify-content-center align-items-center">{props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}</TabList>
-        {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
-      </Tabs>
+      <i className="mt-2 mr-2 fas fa-arrows-alt-h" title="Scroll to see all tabs"></i>
     </div>
   )
 }