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..7df5e07993 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; @@ -44,11 +43,6 @@ overflow-x: auto; overflow-y: hidden; white-space: nowrap; - max-width: 1000px; -} -.left-icon { - width: 70px; - height: 49px; } /* 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 5875cc24ab..5efc17aaca 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 (
{ tabsRef.current[index] = el }} className={classNameTab} title={tab.tooltip}> {tab.icon ? () : ()} @@ -62,16 +62,24 @@ export const TabsUI = (props: TabsUIProps) => { }, []) return ( -
-
- props.onZoomOut()}> - props.onZoomIn()}> - +
+
+
+ props.onZoomOut()}> + props.onZoomIn()}> +
+ { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} + > + + {props.tabs.map((tab, i) => {renderTab(tab, i)})} + + {props.tabs.map((tab) => )} +
- { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} > - {props.tabs.map((tab, i) => {renderTab(tab, i)})} - {props.tabs.map((tab) => )} - +
) }