QC Admin - User Menu Ekonomi : Jumlah Pengangguran

src/app/admin/(dashboard)/desa/potensi/_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 { IconCategory, IconListCheck } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -48,37 +48,44 @@ function LayoutTabsPotensi({ children }: { children: React.ReactNode }) {
         <Stack gap="lg">
             <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Potensi</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)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
-                    ))}
-                </TabsList>
+                {/* ✅ 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
+                                    value={tab.value}
+                                    leftSection={tab.icon}
+                                    style={{
+                                        fontWeight: 600,
+                                        fontSize: "0.9rem",
+                                        transition: "all 0.2s ease",
+                                    }}
+                                >
+                                    {tab.label}
+                                </TabsTab>
+                            </Tooltip>
+                        ))}
+                    </TabsList>
+                </ScrollArea>
 
                 {tabs.map((tab, i) => (
                     <TabsPanel