♿️ Improve Tabs component usability for mobile & overflow states

Author: Frontendland

src/components/Tabs/Tabs.astro

@@ -22,16 +22,18 @@ const classes = [
 ---
 
 <section class:list={classes} data-id="w-tabs">
-    <div class="tabs">
-        {items.map(item => (
-            <button
-                data-value={item.value}
-                class:list={[item.active && 'active']}
-                disabled={item.disabled}
-            >
-                <Fragment set:html={item.label} />
-            </button>
-        ))}
+    <div class="tabs-wrapper">
+        <div class="tabs">
+            {items.map(item => (
+                <button
+                    data-value={item.value}
+                    class:list={[item.active && 'active']}
+                    disabled={item.disabled}
+                >
+                    <Fragment set:html={item.label} />
+                </button>
+            ))}
+        </div>
     </div>
     <div class="tab-content">
         <slot />
@@ -46,7 +48,9 @@ const classes = [
             const target = event.target as HTMLDivElement
 
             if (target.dataset.value) {
-                const tabContent = target.parentElement?.nextElementSibling as HTMLDivElement
+                const tabContent = target.parentElement
+                    ?.parentElement
+                    ?.nextElementSibling as HTMLDivElement
 
                 Array.from(tabContent.children)
                     .forEach((element: any) => {

src/components/Tabs/Tabs.svelte

@@ -35,16 +35,18 @@
 </script>
 
 <section class={classes}>
-    <div class="tabs">
-        {#each items as item}
-            <button
-                class:active={active ? active === item.value : item.active}
-                disabled={item.disabled}
-                on:click={() => setTab(item.value)}
-            >
-                {@html item.label}
-            </button>
-        {/each}
+    <div class="tabs-wrapper">
+        <div class="tabs">
+            {#each items as item}
+                <button
+                    class:active={active ? active === item.value : item.active}
+                    disabled={item.disabled}
+                    on:click={() => setTab(item.value)}
+                >
+                    {@html item.label}
+                </button>
+            {/each}
+        </div>
     </div>
     <div class="tab-content" bind:this={tabContainer}>
         <slot />

src/components/Tabs/Tabs.tsx

@@ -50,16 +50,18 @@ const Tabs = ({
 
     return (
         <section className={classes}>
-            <div className="tabs">
-                {items.map((item, index) => (
-                    <button
-                        key={index}
-                        disabled={item.disabled}
-                        dangerouslySetInnerHTML={{ __html: item.label }}
-                        onClick={() => setTab(item.value)}
-                        className={isActive(item)}
-                    />
-                ))}
+            <div className="tabs-wrapper">
+                <div className="tabs">
+                    {items.map((item, index) => (
+                        <button
+                            key={index}
+                            disabled={item.disabled}
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                            onClick={() => setTab(item.value)}
+                            className={isActive(item)}
+                        />
+                    ))}
+                </div>
             </div>
             <div className="tab-content" ref={tabContainer}>
                 {children}

src/components/Tabs/tabs.scss

@@ -35,13 +35,9 @@
         }
     }
 
-    &.even .tabs {
-        width: auto;
-
-        button {
-            flex: 1;
-            justify-content: center;
-        }
+    &.even .tabs button {
+        flex: 1;
+        justify-content: center;
     }
 
     &.vertical {
@@ -56,7 +52,6 @@
         .tabs {
             flex-direction: column;
             gap: 5px;
-            margin-bottom: 0;
 
             button {
                 padding: 10px;
@@ -67,14 +62,20 @@
                 }
             }
         }
+
+        .tab-content {
+            margin-top: 0;
+        }
+    }
+
+    .tabs-wrapper {
+        overflow: auto;
     }
 
     .tabs {
         border-bottom: 2px solid #252525;
-        margin-bottom: 20px;
         display: flex;
         gap: 10px;
-        flex-wrap: wrap;
 
         button {
             @include Transition(color);
@@ -90,6 +91,7 @@
             display: flex;
             align-items: center;
             gap: 10px;
+            flex-shrink: 0;
 
             svg {
                 pointer-events: none;
@@ -110,6 +112,10 @@
         }
     }
 
+    .tab-content {
+        margin-top: 20px;
+    }
+
     [data-tab] {
         display: none;
 
@@ -118,3 +124,11 @@
         }
     }
 }
+
+@include Media('xs') {
+    .w-tabs {
+        &.even .tabs {
+            width: auto;
+        }
+    }
+}

src/pages/tabs.astro

@@ -159,7 +159,11 @@ const sections = [
             </ComponentWrapper>
 
             <ComponentWrapper title="Overflown tabs">
-                <section.component items={overflowTabs} />
+                <section.component items={overflowTabs}>
+                    <div data-tab="tab-1" data-active="true">Intro tab</div>
+                    <div data-tab="tab-2">Tab 2</div>
+                    <div data-tab="tab-3">Tab 3</div>
+                </section.component>
             </ComponentWrapper>
         </div>
     ))}

src/static/Layout.astro

@@ -7,7 +7,7 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" type="image/svg+xml" href="/img/favicon.svg" />
-        <meta name="viewport" content="width=device-width" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <title>Webcore</title>
     </head>
     <body>