fix ui

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

@@ -40,7 +40,7 @@ export default function BookingRequestDetailPage() {
       <Box style={detailStyles.page}>
         <Center mih="60vh">
           <Stack align="center" gap="md">
-            <Loader color="green" />
+            <Loader color="gray" />
             <Text size="sm" c="dimmed" fw={500}>
               Loading booking…
             </Text>
@@ -64,8 +64,8 @@ export default function BookingRequestDetailPage() {
                   width: 64,
                   height: 64,
                   borderRadius: 16,
-                  background: "var(--mantine-color-green-0)",
-                  color: "var(--mantine-color-green-7)",
+                  background: "var(--mantine-color-gray-1)",
+                  color: "var(--mantine-color-gray-6)",
                 }}
               >
                 <Package size={32} />

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -185,8 +185,18 @@ export default function BookingRequestsPage() {
     },
     {
       id: "status",
+      size: 200,
+      minSize: 180,
       header: () => <span className={bookingTable.headerCell}>Status</span>,
-      cell: ({ row }) => <BookingStatusBadge status={row.original.status} />,
+      cell: ({ row }) => (
+        <div className="py-1">
+          <BookingStatusBadge status={row.original.status} />
+        </div>
+      ),
+      meta: {
+        headerClassName: "min-w-[11rem]",
+        cellClassName: "min-w-[11rem]",
+      },
     },
     {
       id: "approval",
@@ -340,22 +350,16 @@ export default function BookingRequestsPage() {
             style={{
               background: "white",
               border: "1px solid var(--mantine-color-gray-2)",
-              overflowX: "auto",
-              overflowY: "hidden",
-              WebkitOverflowScrolling: "touch",
-              scrollBehavior: "smooth",
             }}
           >
-            <div style={{ minWidth: "min-content", display: "inline-block", width: "100%" }}>
-              <BookingStatusTabs
-                active={activeTab}
-                onChange={(tab) => {
-                  setActiveTab(tab);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                }}
-                counts={tabCounts}
-              />
-            </div>
+            <BookingStatusTabs
+              active={activeTab}
+              onChange={(tab) => {
+                setActiveTab(tab);
+                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+              }}
+              counts={tabCounts}
+            />
           </Paper>
 
           <Card