From f9ce35eb97f6b727b5afa5aa4a9050b96773a3ff Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Thu, 4 Nov 2021 10:26:44 +0100
Subject: [PATCH 1/2] tabs UI improvements

---
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.css | 11 +++--------
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx | 13 ++++++-------
 2 files changed, 9 insertions(+), 15 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 ba745eed46..e1d398360e 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
@@ -1,6 +1,6 @@
 .remix-ui-tabs {
     display: -webkit-box; 
-    max-height: 42px
+    max-height: 2.15rem;
 }
 .remix-ui-tabs li {
     display: inline-block;
@@ -28,12 +28,11 @@
 }
 .close-tabs {
     visibility: hidden;
-    padding-top: 4px;
     font-size: medium;
 }
 .iconImage {
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
 }
 .active {
     border: 1px solid transparent;
@@ -46,10 +45,6 @@
     white-space: nowrap;
     max-width: 1000px;
 }
-.left-icon {
-    width: 70px;
-    height: 49px;
-}
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .tab-scroll::-webkit-scrollbar {
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 5875cc24ab..9ebcc05e8e 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -33,7 +33,7 @@ export const TabsUI = (props: TabsUIProps) => {
 
   const renderTab = (tab, index) => {
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
-    const classNameTab = 'nav-item nav-link tab' + (index === currentIndexRef.current ? ' active' : '')
+    const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
     return (
       <div ref={el => { tabsRef.current[index] = el }} className={classNameTab} title={tab.tooltip}>
         {tab.icon ? (<img className="my-1 mr-1 iconImage" src={tab.icon} />) : (<i className={classNameImg}></i>)}
@@ -62,14 +62,13 @@ export const TabsUI = (props: TabsUIProps) => {
   }, [])
 
   return (
-    <div className="remix-ui-tabs header nav nav-tabs">
-      <div className="d-flex flex-row justify-content-center align-items-center left-icon">
-        <span data-id="tabProxyZoomOut" className="btn btn-sm px-1 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
-        <span data-id="tabProxyZoomIn" className="btn btn-sm px-1 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
-        <i className="d-flex flex-row justify-content-center align-items-center far fa-sliders-v px-1" title="press F1 when focusing the editor to show advanced configuration settings"></i>
+    <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>
       <Tabs className="tab-scroll" selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} >
-        <TabList>{props.tabs.map((tab, i) => <Tab key={tab.name}>{renderTab(tab, i)}</Tab>)}</TabList>
+        <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>

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 2/2] 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>
   )
 }