Merge pull request #1820 from dxc-technology/Mil4n0r/navtab_width-fix

Fixing problems with NavTab inside website

Author: GomezIvann

lib/src/nav-tabs/NavTabs.tsx

@@ -90,7 +90,6 @@ const Underline = styled.div`
   width: 100%;
   height: 2px;
   background-color: ${(props) => props.theme.dividerColor};
-  z-index: -1;
 `;
 
 DxcNavTabs.Tab = DxcTab;

lib/src/nav-tabs/Tab.tsx

@@ -93,7 +93,7 @@ const TabContainer = styled.div<{ active: TabProps["active"] }>`
   align-items: stretch;
   border-bottom: 2px solid ${(props) => (props.active ? props.theme.selectedUnderlineColor : 'transparent')};
   padding: 0.5rem;
-
+  z-index: 1;
   svg {
     color: ${(props) => props.theme.unselectedIconColor};
   }

website/screens/common/TabsPageLayout.tsx

@@ -12,7 +12,6 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
   const router = useRouter();
 
   return (
-    <TabsContainer>
       <DxcNavTabs>
         {tabs.map((tab, index) => (
           <Link key={index} href={tab.path} passHref legacyBehavior>
@@ -22,18 +21,7 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
           </Link>
         ))}
       </DxcNavTabs>
-    </TabsContainer>
   );
 };
 
-const TabsContainer = styled.div`
-  display: grid;
-  grid-template-columns: minmax(0, min-content) 1fr;
-  overflow-x: auto;
-`;
-
-const Divider = styled.span`
-  border-bottom: 2px solid #bfbfbf;
-`;
-
 export default TabsPageLayout;