Update storybook tabs layout

Author: samejr

apps/webapp/app/routes/storybook.tabs/route.tsx

@@ -105,30 +105,19 @@ export default function Story() {
             </ClientTabsContent>
           </ClientTabs>
         </div>
+
         <div>
-          <Paragraph spacing>Variant="segmented"</Paragraph>
+          <Paragraph spacing>Variant="pipe-divider"</Paragraph>
           <ClientTabs defaultValue="tab-1">
             <div className="flex items-center gap-4">
-              <ClientTabsList variant="segmented">
-                <ClientTabsTrigger
-                  value={"tab-1"}
-                  variant="segmented"
-                  layoutId="client-tabs-segmented"
-                >
+              <ClientTabsList variant="pipe-divider">
+                <ClientTabsTrigger value={"tab-1"} variant="pipe-divider">
                   First tab
                 </ClientTabsTrigger>
-                <ClientTabsTrigger
-                  value={"tab-2"}
-                  variant="segmented"
-                  layoutId="client-tabs-segmented"
-                >
+                <ClientTabsTrigger value={"tab-2"} variant="pipe-divider">
                   Second tab
                 </ClientTabsTrigger>
-                <ClientTabsTrigger
-                  value={"tab-3"}
-                  variant="segmented"
-                  layoutId="client-tabs-segmented"
-                >
+                <ClientTabsTrigger value={"tab-3"} variant="pipe-divider">
                   Third tab
                 </ClientTabsTrigger>
               </ClientTabsList>
@@ -151,17 +140,29 @@ export default function Story() {
           </ClientTabs>
         </div>
         <div>
-          <Paragraph spacing>Variant="pipe-divider"</Paragraph>
+          <Paragraph spacing>Variant="segmented"</Paragraph>
           <ClientTabs defaultValue="tab-1">
             <div className="flex items-center gap-4">
-              <ClientTabsList variant="pipe-divider">
-                <ClientTabsTrigger value={"tab-1"} variant="pipe-divider">
+              <ClientTabsList variant="segmented">
+                <ClientTabsTrigger
+                  value={"tab-1"}
+                  variant="segmented"
+                  layoutId="client-tabs-segmented"
+                >
                   First tab
                 </ClientTabsTrigger>
-                <ClientTabsTrigger value={"tab-2"} variant="pipe-divider">
+                <ClientTabsTrigger
+                  value={"tab-2"}
+                  variant="segmented"
+                  layoutId="client-tabs-segmented"
+                >
                   Second tab
                 </ClientTabsTrigger>
-                <ClientTabsTrigger value={"tab-3"} variant="pipe-divider">
+                <ClientTabsTrigger
+                  value={"tab-3"}
+                  variant="segmented"
+                  layoutId="client-tabs-segmented"
+                >
                   Third tab
                 </ClientTabsTrigger>
               </ClientTabsList>