fix adaptive tabs

toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx

@@ -117,7 +117,7 @@ const AdaptiveTabsList = (props: Props) => {
               ref={ ref }
               tabs={ tabs }
               tabsCut={ tabsCut }
-              isActive={ activeTabIndex > 0 && activeTabIndex >= tabsCut }
+              isActive={ activeTabIndex > 0 && tabsCut > 0 && activeTabIndex >= tabsCut }
               { ...(tabsCut >= tabs.length ? HIDDEN_ITEM_STYLES : {}) }
             />
           );
@@ -130,7 +130,7 @@ const AdaptiveTabsList = (props: Props) => {
             ref={ ref }
             scrollSnapAlign="start"
             flexShrink={ 0 }
-            { ...(!tabsCut || index < tabsCut ? {} : HIDDEN_ITEM_STYLES as never) }
+            { ...(index < tabsCut ? {} : HIDDEN_ITEM_STYLES as never) }
           >
             <Skeleton loading={ isLoading }>
               { typeof tab.title === 'function' ? tab.title() : tab.title }

ui/showcases/Tabs.tsx

@@ -61,12 +61,12 @@ const TabsShowcase = () => {
 
         <SectionSubHeader>Adaptive tabs</SectionSubHeader>
         <SamplesStack>
-          <Sample>
+          <Sample gridColumn="1 / 3" w="100%" maxW={{ base: '100vw', lg: '700px' }}>
             <AdaptiveTabs
+              w="100%"
               tabs={ tabs }
               defaultValue={ tabs[0].id }
               outline="1px dashed lightpink"
-              listProps={{ maxW: { base: '100vw', lg: '40vw' } }}
               leftSlot={ <Box display={{ base: 'none', lg: 'block' }}>Left element</Box> }
               leftSlotProps={{ pr: { base: 0, lg: 4 }, color: 'text.secondary' }}
               rightSlot={ <Box display={{ base: 'none', lg: 'block' }}>Right element</Box> }