initial commit

src/pages/doormile/riders/Riders.jsx

@@ -9,7 +9,6 @@ import {
   Input, KpiCard, Modal, PageHeader, SearchInput, Select, SelectContent, SelectItem, SelectTrigger,
   SelectValue, Stack, StatusBadge, Surface, Tabs, Textarea,
 } from '@/components/ds';
-import { ListToolbar } from '@/components/doormile/ListToolbar';
 import {
   useAssignMilerVehicle, useBlockMiler, useMilerLogs, useMilers, useNotifyMiler,
   useRiderSummaryCounts, useVehicles,
@@ -245,20 +244,24 @@ export default function Riders() {
       </Grid>
 
       <Stack space="sm">
-        <div className="flex items-center justify-between gap-4 w-full">
-          <Tabs
-            tabs={TABS.map((entry) => ({ ...entry, count: counts[entry.value] }))}
-            value={tab}
-            onChange={setTab}
-            className="shrink-0"
-          />
+        {/* Wraps, and the tab strip scrolls in its own track — see Orders.jsx
+            for why two `shrink-0` halves scrolled the whole page on a phone. */}
+        <div className="flex flex-wrap items-center justify-between gap-3 w-full">
+          <div className="-mx-1 max-w-full min-w-0 overflow-x-auto px-1 py-0.5">
+            <Tabs
+              tabs={TABS.map((entry) => ({ ...entry, count: counts[entry.value] }))}
+              value={tab}
+              onChange={setTab}
+              className="shrink-0"
+            />
+          </div>
 
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex min-w-0 flex-1 items-center justify-end gap-2 sm:flex-none">
             <SearchInput
               value={search}
               onChange={setSearch}
               placeholder="Search by name, phone, id or city"
-              className="w-72"
+              className="w-full sm:w-72"
             />
           </div>
         </div>