QC Admin - User Menu Ekonomi : Jumlah Pengangguran

src/app/admin/(dashboard)/ppid/struktur-ppid/_lib/layoutTabs.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconBuildingCommunity, IconHierarchy2, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -58,21 +58,27 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         Struktur PPID
       </Title>
       <Tabs
-        color={colors['blue-button']}
-        variant='pills'
+        color={colors["blue-button"]}
+        variant="pills"
         value={activeTab}
         onChange={handleTabChange}
         radius="lg"
         keepMounted={false}
       >
-        <TabsList
-          p="sm"
-          style={{
-            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-            borderRadius: "1rem",
-            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-          }}
-        >
+        {/* ✅ Scroll horizontal wrapper */}
+        <ScrollArea type="auto" offsetScrollbars>
+          <TabsList
+            p="sm"
+            style={{
+              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+              borderRadius: "1rem",
+              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: "0.5rem",
+              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+            }}
+          >
           {tabs.map((tab, i) => (
             <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
               <TabsTab
@@ -89,6 +95,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
             </Tooltip>
           ))}
         </TabsList>
+      </ScrollArea>
 
         {tabs.map((tab, i) => (
           <TabsPanel