style: finalize the style of the dashboard

apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx

@@ -1,3 +1,4 @@
+import { Badge, ScrollArea, Tabs } from "@mantine/core";
 import {
   CheckCircle,
   ClipboardCheck,
@@ -8,13 +9,12 @@ import {
   Wallet,
   XCircle,
 } from "lucide-react";
-import { Badge, Tabs } from "@mantine/core";
 
+import "@/components/overview/overview.css";
 import {
   BOOKING_LIST_TABS,
   type BookingStatusTabKey,
 } from "@/features/bookings/booking-status.config";
-import "@/components/overview/overview.css";
 
 const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
   all: <LayoutGrid size={17} strokeWidth={1.85} />,
@@ -47,8 +47,9 @@ export function BookingStatusTabs({
       keepMounted={false}
       classNames={{ list: "ov-tablist", tab: "ov-tab" }}
     >
-      <Tabs.List>
-        {BOOKING_LIST_TABS.map((tab) => {
+      <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars="x">
+        <Tabs.List style={{ flexWrap: "nowrap", width: "max-content" }}>
+          {BOOKING_LIST_TABS.map((tab) => {
           const isActive = active === tab.key;
           const count = counts?.[tab.key];
           return (
@@ -56,6 +57,7 @@ export function BookingStatusTabs({
               key={tab.key}
               value={tab.key}
               leftSection={TAB_ICONS[tab.key]}
+              size={"sm"}
               rightSection={
                 count !== undefined ? (
                   <Badge
@@ -77,8 +79,9 @@ export function BookingStatusTabs({
               {tab.label}
             </Tabs.Tab>
           );
-        })}
-      </Tabs.List>
+          })}
+        </Tabs.List>
+      </ScrollArea>
     </Tabs>
   );
 }