tabs fixes for mobile

Author: davemooreuws

src/components/InstallNitric/InstallNitricTabs.client.tsx

@@ -19,24 +19,21 @@ export const InstallNitricTabs: React.FC<InstallNitricProps> = ({
 
   return (
     <Tabs value={currentOS} onValueChange={(val) => setCurrentOS(val as OS)}>
-      <TabsList className="mt-auto h-12 bg-transparent">
+      <TabsList className="relative mx-0 mt-auto h-12 w-full rounded-b-none bg-transparent p-0">
         {tabs.map((tab) => (
           <TabsTrigger
             key={tab.meta}
             value={tab.meta}
-            className="group/tab relative hover:text-zinc-200 data-[state=active]:bg-transparent data-[state=active]:text-primary-300"
+            className="group/tab relative h-12 hover:text-zinc-200 data-[state=active]:bg-transparent data-[state=active]:text-primary-300"
           >
             {tab.meta}
-            <div className="absolute inset-x-2 -bottom-[8px] h-px bg-primary-300 opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100" />
+            <div className="absolute inset-x-2 bottom-0 h-px bg-primary-300 opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100" />
           </TabsTrigger>
         ))}
+        <div className="absolute inset-x-0 bottom-0 h-px bg-zinc-300/10" />
       </TabsList>
       {tabs.map((tab, i) => (
-        <TabsContent
-          key={tab.meta}
-          value={tab.meta}
-          className="m-0 border-t border-zinc-300/10"
-        >
+        <TabsContent key={tab.meta} value={tab.meta} className="m-0">
           <Pre highlighted={highlighted[i]} copyButtonClassName={'top-14'} />
         </TabsContent>
       ))}

src/components/code/CodeWithTabs.tsx

@@ -28,23 +28,24 @@ export function CodeTabs(props: {
   return (
     <CodeContainer>
       <Tabs defaultValue={meta(tabs[0]).base}>
-        <TabsList className="mt-auto h-12 bg-transparent">
+        <TabsList className="relative mx-0 mt-auto h-12 w-full rounded-b-none bg-transparent p-0">
           {tabs.map((tab) => (
             <TabsTrigger
               key={meta(tab).base}
               value={meta(tab).base}
-              className="group/tab relative hover:text-zinc-200 data-[state=active]:bg-transparent data-[state=active]:text-primary-300"
+              className="group/tab relative h-12 hover:text-zinc-200 data-[state=active]:bg-transparent data-[state=active]:text-primary-300"
             >
               {meta(tab).base}
-              <div className="absolute inset-x-2 -bottom-[8px] h-px bg-primary-300 opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100" />
+              <div className="absolute inset-x-2 bottom-0 h-px bg-primary-300 opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100" />
             </TabsTrigger>
           ))}
+          <div className="absolute inset-x-0 bottom-0 h-px bg-zinc-300/10" />
         </TabsList>
         {tabs.map((tab, i) => (
           <TabsContent
             key={meta(tab).base}
             value={meta(tab).base}
-            className="m-0 border-t border-zinc-300/10"
+            className="m-0"
           >
             <Pre
               highlighted={highlighted[i]}

src/components/ui/tabs.tsx

@@ -15,6 +15,8 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      // classes to make the tabs overflow horizontally
+      'w-full scroll-px-5 justify-start overflow-x-auto overscroll-x-contain [scrollbar-width:none] sm:scroll-px-0 [&::-webkit-scrollbar]:hidden',
       className,
     )}
     {...props}