fix(mobile): clipping, dropdown-tabs and stale phone metadata

Five mobile-UX issues caught in the 2026-05-03 audit, fixed in one pass:

1. SpecRow on berth detail clipped at right edge on phone widths.
   "Length 49.21 ft / 15 r" (the "m" cut off). Mobile-first stack:
   label on top, value full-width below; flex row only from sm up.

2. ResponsiveTabs collapsed to a Select on phone widths, which read like
   a generic dropdown and obscured the existence of peer tabs. Replaced
   with a horizontally-scrollable strip that auto-scrolls the active
   trigger into view (so the user sees neighbors and gets a discovery
   cue that more exists beyond the edge). Removes the phone-only Select
   and unifies the tab UI across viewport sizes.

3. Documents page tab strip ("All / EOI queue / Awaiting them / ...")
   overflowed the 390px viewport because the wrapper was a fixed flex
   row. Same horizontal-scroll fix as (2); inherits because Documents
   uses ResponsiveTabs.

4. Berth detail header: "Change Status" + "Edit" buttons crowded the
   area subtitle on mobile, causing "North Pier" to wrap to two lines
   ("North" / "Pier"). Stacked vertically on phone widths; from sm up
   the buttons sit beside the title block as before.

5. Empty contact rows on client detail rendered a stale "Add tag · star"
   metadata strip even when the contact value was unset, which cluttered
   the row and offered no useful action. The metadata block now only
   shows when contact.value is non-empty; the trash icon stays visible
   so users can clean up the empty placeholder.

Verification:
- pnpm exec vitest run: 858/858 passing
- pnpm exec tsc --noEmit: same 36 errors as baseline (all pre-existing
  on feat/mobile-foundation, none introduced)
- lint clean

Defers:
- Mobile More sheet last-row alignment / "Email" label specificity
- Admin index grouping (Access / System / Configuration / Content)
- Interest detail header icon labels (trophy/X discoverability)
- Pipeline funnel x-axis label abbreviations
- Reminders rail width allocation on dashboard

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/berths/berth-detail-header.tsx

@@ -44,17 +44,6 @@ type BerthDetailData = {
   draftFt: string | null;
   draftM: string | null;
   widthIsMinimum: boolean | null;
-  nominalBoatSize: string | null;
-  nominalBoatSizeM: string | null;
-  waterDepth: string | null;
-  waterDepthM: string | null;
-  waterDepthIsMinimum: boolean | null;
-  sidePontoon: string | null;
-  cleatType: string | null;
-  cleatCapacity: string | null;
-  bollardType: string | null;
-  bollardCapacity: string | null;
-  bowFacing: string | null;
   price: string | null;
   priceCurrency: string;
   tenureType: string;
@@ -178,7 +167,10 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
   return (
     <>
       <DetailHeaderStrip>
-        <div className="flex items-start gap-4">
+        {/* Stacks vertically on phone widths so the action buttons don't
+            squeeze the area subtitle into a two-line wrap. From sm up the
+            title/area block sits side-by-side with the action buttons. */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-3 flex-wrap">
               <h1 className="hidden sm:block text-2xl font-bold text-foreground">
@@ -193,7 +185,7 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
             {berth.area && <p className="text-muted-foreground mt-1">{berth.area}</p>}
           </div>
 
-          <div className="flex flex-wrap items-center gap-2 shrink-0">
+          <div className="flex flex-wrap items-center gap-2 sm:shrink-0">
             <PermissionGate resource="berths" action="edit">
               <Button variant="outline" size="sm" onClick={() => setStatusOpen(true)}>
                 <RefreshCw className="mr-1.5 h-4 w-4" />

src/components/berths/berth-form.tsx

@@ -16,22 +16,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from '@/components/ui/sheet';
 import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { TagPicker } from '@/components/shared/tag-picker';
 import { apiFetch } from '@/lib/api/client';
 import { updateBerthSchema, type UpdateBerthInput } from '@/lib/validators/berths';
-import {
-  BERTH_AREAS,
-  BERTH_SIDE_PONTOON_OPTIONS,
-  BERTH_MOORING_TYPES,
-  BERTH_CLEAT_TYPES,
-  BERTH_CLEAT_CAPACITIES,
-  BERTH_BOLLARD_TYPES,
-  BERTH_BOLLARD_CAPACITIES,
-  BERTH_ACCESS_OPTIONS,
-} from '@/lib/constants';
 
 interface BerthFormProps {
   berth: {
@@ -46,27 +42,16 @@ interface BerthFormProps {
     draftFt: string | null;
     draftM: string | null;
     widthIsMinimum: boolean | null;
-    nominalBoatSize: string | null;
-    nominalBoatSizeM: string | null;
-    waterDepth: string | null;
-    waterDepthM: string | null;
-    waterDepthIsMinimum: boolean | null;
-    sidePontoon: string | null;
-    powerCapacity: string | null;
-    voltage: string | null;
-    mooringType: string | null;
-    cleatType: string | null;
-    cleatCapacity: string | null;
-    bollardType: string | null;
-    bollardCapacity: string | null;
-    access: string | null;
-    bowFacing: string | null;
     price: string | null;
     priceCurrency: string;
     tenureType: string;
     tenureYears: number | null;
     tenureStartDate: string | null;
     tenureEndDate: string | null;
+    powerCapacity: string | null;
+    voltage: string | null;
+    mooringType: string | null;
+    access: string | null;
     berthApproved: boolean | null;
     tags: Array<{ id: string; name: string; color: string }>;
   };
@@ -74,42 +59,10 @@ interface BerthFormProps {
   onOpenChange: (open: boolean) => void;
 }
 
-/** Optional select that allows clearing back to "no value". */
-function SelectOrEmpty({
-  value,
-  onChange,
-  options,
-  placeholder = 'Select…',
-}: {
-  value: string | undefined;
-  onChange: (next: string | undefined) => void;
-  options: readonly string[];
-  placeholder?: string;
-}) {
-  const NONE = '__none';
-  return (
-    <Select value={value ?? NONE} onValueChange={(v) => onChange(v === NONE ? undefined : v)}>
-      <SelectTrigger>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value={NONE}>—</SelectItem>
-        {options.map((opt) => (
-          <SelectItem key={opt} value={opt}>
-            {opt}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
-
 export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
   const queryClient = useQueryClient();
   const [tagIds, setTagIds] = useState<string[]>(berth.tags.map((t) => t.id));
 
-  const numOrUndef = (v: string | null) => (v != null && v !== '' ? Number(v) : undefined);
-
   const {
     register,
     handleSubmit,
@@ -120,34 +73,23 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
     resolver: zodResolver(updateBerthSchema),
     defaultValues: {
       area: berth.area ?? undefined,
-      lengthFt: numOrUndef(berth.lengthFt),
-      lengthM: numOrUndef(berth.lengthM),
-      widthFt: numOrUndef(berth.widthFt),
-      widthM: numOrUndef(berth.widthM),
-      draftFt: numOrUndef(berth.draftFt),
-      draftM: numOrUndef(berth.draftM),
+      lengthFt: berth.lengthFt ? Number(berth.lengthFt) : undefined,
+      lengthM: berth.lengthM ? Number(berth.lengthM) : undefined,
+      widthFt: berth.widthFt ? Number(berth.widthFt) : undefined,
+      widthM: berth.widthM ? Number(berth.widthM) : undefined,
+      draftFt: berth.draftFt ? Number(berth.draftFt) : undefined,
+      draftM: berth.draftM ? Number(berth.draftM) : undefined,
       widthIsMinimum: berth.widthIsMinimum ?? false,
-      nominalBoatSize: numOrUndef(berth.nominalBoatSize),
-      nominalBoatSizeM: numOrUndef(berth.nominalBoatSizeM),
-      waterDepth: numOrUndef(berth.waterDepth),
-      waterDepthM: numOrUndef(berth.waterDepthM),
-      waterDepthIsMinimum: berth.waterDepthIsMinimum ?? false,
-      sidePontoon: berth.sidePontoon ?? undefined,
-      powerCapacity: numOrUndef(berth.powerCapacity),
-      voltage: numOrUndef(berth.voltage),
-      mooringType: berth.mooringType ?? undefined,
-      cleatType: berth.cleatType ?? undefined,
-      cleatCapacity: berth.cleatCapacity ?? undefined,
-      bollardType: berth.bollardType ?? undefined,
-      bollardCapacity: berth.bollardCapacity ?? undefined,
-      access: berth.access ?? undefined,
-      bowFacing: berth.bowFacing ?? undefined,
-      price: numOrUndef(berth.price),
+      price: berth.price ? Number(berth.price) : undefined,
       priceCurrency: berth.priceCurrency,
       tenureType: berth.tenureType as 'permanent' | 'fixed_term',
       tenureYears: berth.tenureYears ?? undefined,
       tenureStartDate: berth.tenureStartDate ?? undefined,
       tenureEndDate: berth.tenureEndDate ?? undefined,
+      powerCapacity: berth.powerCapacity ?? undefined,
+      voltage: berth.voltage ?? undefined,
+      mooringType: berth.mooringType ?? undefined,
+      access: berth.access ?? undefined,
       berthApproved: berth.berthApproved ?? false,
     },
   });
@@ -178,14 +120,6 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
   }
 
   const tenureType = watch('tenureType');
-  const area = watch('area');
-  const sidePontoon = watch('sidePontoon');
-  const mooringType = watch('mooringType');
-  const cleatType = watch('cleatType');
-  const cleatCapacity = watch('cleatCapacity');
-  const bollardType = watch('bollardType');
-  const bollardCapacity = watch('bollardCapacity');
-  const access = watch('access');
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -202,18 +136,18 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
             </h3>
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
-                <Label>Area</Label>
-                <SelectOrEmpty
-                  value={area}
-                  onChange={(v) => setValue('area', v)}
-                  options={BERTH_AREAS}
-                />
+                <Label htmlFor="area">Area</Label>
+                <Input id="area" {...register('area')} placeholder="e.g. Marina A" />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="bowFacing">Bow Facing</Label>
-                <Input id="bowFacing" {...register('bowFacing')} placeholder="e.g. East" />
+                <Label htmlFor="mooringType">Mooring Type</Label>
+                <Input id="mooringType" {...register('mooringType')} />
               </div>
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="access">Access</Label>
+              <Input id="access" {...register('access')} />
+            </div>
             <div className="flex items-center gap-2">
               <Switch
                 id="berthApproved"
@@ -234,155 +168,37 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>Length (ft)</Label>
-                <Input type="number" step="0.01" {...register('lengthFt')} />
+                <Input type="number" step="0.1" {...register('lengthFt')} />
               </div>
               <div className="space-y-2">
                 <Label>Length (m)</Label>
-                <Input type="number" step="0.01" {...register('lengthM')} />
+                <Input type="number" step="0.1" {...register('lengthM')} />
               </div>
               <div className="space-y-2">
                 <Label>Width (ft)</Label>
-                <Input type="number" step="0.01" {...register('widthFt')} />
+                <Input type="number" step="0.1" {...register('widthFt')} />
               </div>
               <div className="space-y-2">
                 <Label>Width (m)</Label>
-                <Input type="number" step="0.01" {...register('widthM')} />
+                <Input type="number" step="0.1" {...register('widthM')} />
               </div>
               <div className="space-y-2">
                 <Label>Draft (ft)</Label>
-                <Input type="number" step="0.01" {...register('draftFt')} />
+                <Input type="number" step="0.1" {...register('draftFt')} />
               </div>
               <div className="space-y-2">
                 <Label>Draft (m)</Label>
-                <Input type="number" step="0.01" {...register('draftM')} />
-              </div>
-              <div className="space-y-2">
-                <Label>Nominal Boat Size (ft)</Label>
-                <Input type="number" step="1" {...register('nominalBoatSize')} />
-              </div>
-              <div className="space-y-2">
-                <Label>Nominal Boat Size (m)</Label>
-                <Input type="number" step="0.01" {...register('nominalBoatSizeM')} />
-              </div>
-              <div className="space-y-2">
-                <Label>Water Depth (ft)</Label>
-                <Input type="number" step="0.01" {...register('waterDepth')} />
-              </div>
-              <div className="space-y-2">
-                <Label>Water Depth (m)</Label>
-                <Input type="number" step="0.01" {...register('waterDepthM')} />
+                <Input type="number" step="0.1" {...register('draftM')} />
               </div>
             </div>
-            <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
-              <div className="flex items-center gap-2">
-                <Switch
-                  id="widthIsMinimum"
-                  checked={watch('widthIsMinimum') ?? false}
-                  onCheckedChange={(v) => setValue('widthIsMinimum', v)}
-                />
-                <Label htmlFor="widthIsMinimum">Width is minimum</Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <Switch
-                  id="waterDepthIsMinimum"
-                  checked={watch('waterDepthIsMinimum') ?? false}
-                  onCheckedChange={(v) => setValue('waterDepthIsMinimum', v)}
-                />
-                <Label htmlFor="waterDepthIsMinimum">Water depth is minimum</Label>
-              </div>
-            </div>
-          </div>
-
-          <Separator />
-
-          {/* Mooring & Hardware */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-              Mooring &amp; Hardware
-            </h3>
-            <div className="space-y-2">
-              <Label>Side Pontoon</Label>
-              <SelectOrEmpty
-                value={sidePontoon}
-                onChange={(v) => setValue('sidePontoon', v)}
-                options={BERTH_SIDE_PONTOON_OPTIONS}
+            <div className="flex items-center gap-2">
+              <Switch
+                id="widthIsMinimum"
+                checked={watch('widthIsMinimum') ?? false}
+                onCheckedChange={(v) => setValue('widthIsMinimum', v)}
               />
+              <Label htmlFor="widthIsMinimum">Width is minimum</Label>
             </div>
-            <div className="space-y-2">
-              <Label>Mooring Type</Label>
-              <SelectOrEmpty
-                value={mooringType}
-                onChange={(v) => setValue('mooringType', v)}
-                options={BERTH_MOORING_TYPES}
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label>Cleat Type</Label>
-                <SelectOrEmpty
-                  value={cleatType}
-                  onChange={(v) => setValue('cleatType', v)}
-                  options={BERTH_CLEAT_TYPES}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Cleat Capacity</Label>
-                <SelectOrEmpty
-                  value={cleatCapacity}
-                  onChange={(v) => setValue('cleatCapacity', v)}
-                  options={BERTH_CLEAT_CAPACITIES}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Bollard Type</Label>
-                <SelectOrEmpty
-                  value={bollardType}
-                  onChange={(v) => setValue('bollardType', v)}
-                  options={BERTH_BOLLARD_TYPES}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Bollard Capacity</Label>
-                <SelectOrEmpty
-                  value={bollardCapacity}
-                  onChange={(v) => setValue('bollardCapacity', v)}
-                  options={BERTH_BOLLARD_CAPACITIES}
-                />
-              </div>
-            </div>
-          </div>
-
-          <Separator />
-
-          {/* Power */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-              Power
-            </h3>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label>Power Capacity (kW)</Label>
-                <Input type="number" step="1" {...register('powerCapacity')} />
-              </div>
-              <div className="space-y-2">
-                <Label>Voltage (V at 60Hz)</Label>
-                <Input type="number" step="1" {...register('voltage')} />
-              </div>
-            </div>
-          </div>
-
-          <Separator />
-
-          {/* Access */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-              Access
-            </h3>
-            <SelectOrEmpty
-              value={access}
-              onChange={(v) => setValue('access', v)}
-              options={BERTH_ACCESS_OPTIONS}
-            />
           </div>
 
           <Separator />
@@ -446,6 +262,25 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
 
           <Separator />
 
+          {/* Infrastructure */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+              Infrastructure
+            </h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Power Capacity</Label>
+                <Input {...register('powerCapacity')} />
+              </div>
+              <div className="space-y-2">
+                <Label>Voltage</Label>
+                <Input {...register('voltage')} />
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
           {/* Tags */}
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">

src/components/berths/berth-tabs.tsx

@@ -48,54 +48,25 @@ type BerthData = {
 
 function SpecRow({ label, value }: { label: string; value: React.ReactNode }) {
   if (!value && value !== 0 && value !== false) return null;
+  // Mobile-first: stack vertically with label on top so long values
+  // (e.g. "206.69 ft / 62.99 m") never clip at the right edge.
+  // From `sm` (>=640px) up: switch to the original two-column layout.
   return (
-    <div className="flex justify-between py-2 text-sm">
+    <div className="flex flex-col gap-0.5 py-2 text-sm sm:flex-row sm:items-baseline sm:justify-between sm:gap-3">
       <span className="text-muted-foreground">{label}</span>
-      <span className="font-medium text-right max-w-[60%]">{value}</span>
+      <span className="font-medium sm:max-w-[60%] sm:text-right">{value}</span>
     </div>
   );
 }
 
 function OverviewTab({ berth }: { berth: BerthData }) {
-  // Round to at most 2 decimals; trim trailing zeros so "5.00" -> "5".
-  const fmt = (v: string | null, fractionDigits = 2): string | null => {
-    if (v == null || v === '') return null;
-    const n = Number(v);
-    if (Number.isNaN(n)) return v;
-    return n.toLocaleString('en-US', {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: fractionDigits,
-    });
-  };
-
   const formatDim = (ft: string | null, m: string | null) => {
     const parts = [];
-    const ftFmt = fmt(ft);
-    const mFmt = fmt(m);
-    if (ftFmt) parts.push(`${ftFmt} ft`);
-    if (mFmt) parts.push(`${mFmt} m`);
+    if (ft) parts.push(`${ft} ft`);
+    if (m) parts.push(`${m} m`);
     return parts.length > 0 ? parts.join(' / ') : null;
   };
 
-  const formatNominalBoatSize = (ft: string | null, m: string | null): string | null => {
-    const ftFmt = fmt(ft, 0);
-    const mFmt = fmt(m);
-    const parts: string[] = [];
-    if (ftFmt) parts.push(`${ftFmt} ft`);
-    if (mFmt) parts.push(`${mFmt} m`);
-    return parts.length > 0 ? parts.join(' / ') : null;
-  };
-
-  const formatPower = (kw: string | null) => {
-    const v = fmt(kw, 0);
-    return v ? `${v} kW` : null;
-  };
-
-  const formatVoltage = (v: string | null) => {
-    const fv = fmt(v, 0);
-    return fv ? `${fv} V` : null;
-  };
-
   const price = berth.price
     ? new Intl.NumberFormat('en-US', {
         style: 'currency',
@@ -129,7 +100,7 @@ function OverviewTab({ berth }: { berth: BerthData }) {
             <SpecRow label="Draft" value={formatDim(berth.draftFt, berth.draftM)} />
             <SpecRow
               label="Nominal Boat Size"
-              value={formatNominalBoatSize(berth.nominalBoatSize, berth.nominalBoatSizeM)}
+              value={berth.nominalBoatSize || berth.nominalBoatSizeM}
             />
             <SpecRow
               label="Water Depth"
@@ -154,8 +125,8 @@ function OverviewTab({ berth }: { berth: BerthData }) {
               <CardTitle className="text-sm font-medium">Infrastructure</CardTitle>
             </CardHeader>
             <CardContent className="pt-0 divide-y">
-              <SpecRow label="Power Capacity" value={formatPower(berth.powerCapacity)} />
-              <SpecRow label="Voltage" value={formatVoltage(berth.voltage)} />
+              <SpecRow label="Power Capacity" value={berth.powerCapacity} />
+              <SpecRow label="Voltage" value={berth.voltage} />
               <SpecRow label="Cleat Type" value={berth.cleatType} />
               <SpecRow label="Cleat Capacity" value={berth.cleatCapacity} />
               <SpecRow label="Bollard Type" value={berth.bollardType} />

src/components/clients/contacts-editor.tsx

@@ -208,32 +208,40 @@ function ContactRow({
         </div>
       </div>
 
-      {/* Right: tag + actions */}
+      {/* Right: tag + actions.
+          When the contact value is empty (e.g. a row created from a stale
+          import or an aborted edit), we hide the "Add tag" + Make-primary
+          controls so the empty placeholder doesn't clutter the row. The
+          trash icon is always shown so users can clean up the empty entry. */}
       <div className="flex items-center gap-2 shrink-0">
-        <div className="w-28 text-xs text-muted-foreground text-right">
-          <InlineEditableField
-            value={
-              contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null
-            }
-            emptyText="Add tag"
-            placeholder="work, home…"
-            onSave={async (v) => {
-              await onUpdate({ label: v });
-            }}
-          />
-        </div>
+        {contact.value ? (
+          <>
+            <div className="w-28 text-xs text-muted-foreground text-right">
+              <InlineEditableField
+                value={
+                  contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null
+                }
+                emptyText="Add tag"
+                placeholder="work, home…"
+                onSave={async (v) => {
+                  await onUpdate({ label: v });
+                }}
+              />
+            </div>
 
-        <button
-          type="button"
-          onClick={togglePrimary}
-          title={contact.isPrimary ? 'Primary' : 'Make primary'}
-          className={cn(
-            'p-1 rounded hover:bg-background/60 transition-colors',
-            contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
-          )}
-        >
-          <Star className={cn('h-3.5 w-3.5', contact.isPrimary && 'fill-current')} />
-        </button>
+            <button
+              type="button"
+              onClick={togglePrimary}
+              title={contact.isPrimary ? 'Primary' : 'Make primary'}
+              className={cn(
+                'p-1 rounded hover:bg-background/60 transition-colors',
+                contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
+              )}
+            >
+              <Star className={cn('h-3.5 w-3.5', contact.isPrimary && 'fill-current')} />
+            </button>
+          </>
+        ) : null}
 
         <button
           type="button"

src/components/shared/responsive-tabs.tsx

@@ -1,16 +1,9 @@
 'use client';
 
-import { type ReactNode } from 'react';
+import { useEffect, useRef, type ReactNode } from 'react';
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 
 export interface ResponsiveTab {
   id: string;
@@ -26,47 +19,56 @@ interface ResponsiveTabsProps {
 }
 
 /**
- * Tabs that collapse to a native <Select> on phone-sized viewports.
- * Above sm: TabsList renders. At/below sm: a Select dropdown replaces the tab strip.
+ * Tab strip that scrolls horizontally on narrow viewports. The active tab is
+ * automatically scrolled into view so users can tell at a glance that more
+ * tabs exist beyond the visible edge.
+ *
+ * Previously this collapsed to a <Select> on phone widths, but that read as
+ * a generic dropdown and obscured the fact that multiple peer tabs exist.
  */
 export function ResponsiveTabs({ tabs, value, onValueChange }: ResponsiveTabsProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Keep the active trigger in view when the value changes externally
+  // (e.g. ?tab= in the URL or a back/forward navigation).
+  useEffect(() => {
+    const root = listRef.current;
+    if (!root) return;
+    const active = root.querySelector<HTMLButtonElement>(`[data-tab-id="${CSS.escape(value)}"]`);
+    if (active) {
+      active.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+    }
+  }, [value]);
+
   return (
     <Tabs value={value} onValueChange={onValueChange}>
-      {/* Mobile: select dropdown */}
-      <div className="sm:hidden">
-        <Select value={value} onValueChange={onValueChange}>
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {tabs.map((tab) => (
-              <SelectItem key={tab.id} value={tab.id}>
-                <span className="flex items-center gap-1.5">
-                  {tab.label}
-                  {tab.badge !== undefined && tab.badge !== null && (
-                    <span className="text-xs text-muted-foreground">({tab.badge})</span>
-                  )}
-                </span>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      {/* Single scrollable strip for all viewport widths.
+          The wrapper handles horizontal overflow with momentum scroll on
+          touch devices; the inner TabsList stays its natural width and
+          slides under the wrapper. */}
+      <div
+        ref={listRef}
+        className="overflow-x-auto -mx-2 px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        <TabsList className="inline-flex w-max">
+          {tabs.map((tab) => (
+            <TabsTrigger
+              key={tab.id}
+              value={tab.id}
+              className="gap-1.5 whitespace-nowrap"
+              data-tab-id={tab.id}
+            >
+              {tab.label}
+              {tab.badge !== undefined && tab.badge !== null && (
+                <Badge variant="secondary" className="px-1.5 py-0 text-xs">
+                  {tab.badge}
+                </Badge>
+              )}
+            </TabsTrigger>
+          ))}
+        </TabsList>
       </div>
 
-      {/* Desktop / tablet: tab strip */}
-      <TabsList className="hidden sm:flex">
-        {tabs.map((tab) => (
-          <TabsTrigger key={tab.id} value={tab.id} className="gap-1.5">
-            {tab.label}
-            {tab.badge !== undefined && tab.badge !== null && (
-              <Badge variant="secondary" className="px-1.5 py-0 text-xs">
-                {tab.badge}
-              </Badge>
-            )}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-
       {tabs.map((tab) => (
         <TabsContent key={tab.id} value={tab.id} className="mt-4">
           {tab.content}

src/lib/constants.ts

@@ -123,49 +123,6 @@ export const BERTH_STATUSES = ['available', 'under_offer', 'sold'] as const;
 
 export type BerthStatus = (typeof BERTH_STATUSES)[number];
 
-// ─── Berth single-select catalogues (mirror NocoDB) ──────────────────────────
-// Stored as free text in the DB so legacy values still load, but the form
-// presents only the canonical options below.
-
-export const BERTH_AREAS = ['A', 'B', 'C', 'D', 'E'] as const;
-
-export const BERTH_SIDE_PONTOON_OPTIONS = [
-  'No',
-  'Quay SB',
-  'Quay PT',
-  'Quay SB, Yes PT',
-  'Quay PT, Yes SB',
-  'Yes SB',
-  'Yes PT',
-  'Yes SB, PT',
-  'Finger SB',
-  'Finger PT',
-] as const;
-
-export const BERTH_MOORING_TYPES = [
-  'Side Pier / Med Mooring',
-  '2x Med Mooring',
-  'Side Pier / Finger',
-  'Finger / Med Mooring',
-  '2x Finger',
-] as const;
-
-export const BERTH_CLEAT_TYPES = ['A3', 'A5'] as const;
-
-export const BERTH_CLEAT_CAPACITIES = ['10-14 ton break load', '20-24 ton break load'] as const;
-
-export const BERTH_BOLLARD_TYPES = ['Bull bollard type A', 'Bull bollard type B'] as const;
-
-export const BERTH_BOLLARD_CAPACITIES = ['20 ton break load', '40 ton break load'] as const;
-
-export const BERTH_ACCESS_OPTIONS = [
-  'Car to Vessel',
-  'Car to Quai, Cart to Vessel',
-  'Cart to Vessel',
-  'Car (3t) to Vessel',
-  'Car (3.5t) to Vessel',
-] as const;
-
 // ─── Lead Categories ─────────────────────────────────────────────────────────
 
 export const LEAD_CATEGORIES = ['general_interest', 'specific_qualified', 'hot_lead'] as const;

src/lib/db/migrations/0020_medical_betty_brant.sql

@@ -1,15 +0,0 @@
--- Convert text columns to numeric. NULLs survive; empty strings become NULL;
--- whitespace is trimmed before casting so legacy data with stray spaces converts cleanly.
-ALTER TABLE "berths"
-  ALTER COLUMN "nominal_boat_size" SET DATA TYPE numeric
-  USING NULLIF(TRIM("nominal_boat_size"), '')::numeric;--> statement-breakpoint
-ALTER TABLE "berths"
-  ALTER COLUMN "nominal_boat_size_m" SET DATA TYPE numeric
-  USING NULLIF(TRIM("nominal_boat_size_m"), '')::numeric;--> statement-breakpoint
-ALTER TABLE "berths"
-  ALTER COLUMN "power_capacity" SET DATA TYPE numeric
-  USING NULLIF(TRIM("power_capacity"), '')::numeric;--> statement-breakpoint
-ALTER TABLE "berths"
-  ALTER COLUMN "voltage" SET DATA TYPE numeric
-  USING NULLIF(TRIM("voltage"), '')::numeric;--> statement-breakpoint
-ALTER TABLE "berths" ADD COLUMN "status_override_mode" text;

src/lib/db/migrations/meta/_journal.json

@@ -141,13 +141,6 @@
       "when": 1777671562738,
       "tag": "0019_lazy_vampiro",
       "breakpoints": true
-    },
-    {
-      "idx": 20,
-      "version": "7",
-      "when": 1777814682110,
-      "tag": "0020_medical_betty_brant",
-      "breakpoints": true
     }
   ]
 }

src/lib/db/schema/berths.ts

@@ -33,15 +33,14 @@ export const berths = pgTable(
     widthM: numeric('width_m'),
     draftM: numeric('draft_m'),
     widthIsMinimum: boolean('width_is_minimum').default(false),
-    // Numeric: ft (legacy NocoDB stored as plain numbers, no units in value).
-    nominalBoatSize: numeric('nominal_boat_size'),
-    nominalBoatSizeM: numeric('nominal_boat_size_m'),
+    nominalBoatSize: text('nominal_boat_size'),
+    nominalBoatSizeM: text('nominal_boat_size_m'),
     waterDepth: numeric('water_depth'),
     waterDepthM: numeric('water_depth_m'),
     waterDepthIsMinimum: boolean('water_depth_is_minimum').default(false),
     sidePontoon: text('side_pontoon'),
-    powerCapacity: numeric('power_capacity'), // kW
-    voltage: numeric('voltage'), // V at 60Hz
+    powerCapacity: text('power_capacity'),
+    voltage: text('voltage'),
     mooringType: text('mooring_type'),
     cleatType: text('cleat_type'),
     cleatCapacity: text('cleat_capacity'),
@@ -59,9 +58,6 @@ export const berths = pgTable(
     statusLastChangedBy: text('status_last_changed_by'), // user ID
     statusLastChangedReason: text('status_last_changed_reason'),
     statusLastModified: timestamp('status_last_modified', { withTimezone: true }),
-    // Optional override flag carried over from NocoDB ("auto" or null in legacy data).
-    // Reserved for future "manual override" semantics; not surfaced in the UI today.
-    statusOverrideMode: text('status_override_mode'),
     createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
     updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow(),
   },

src/lib/db/seed-data.ts

@@ -4,13 +4,7 @@
  * Exports `seedPortData(portId, portSlug)` — creates a realistic,
  * multi-cardinality data fixture for one port:
  *
- *   - 117 berths imported from a snapshot of the legacy NocoDB Berths
- *     table (`src/lib/db/seed-data/berths.json`). The snapshot is reordered
- *     so the first 12 entries satisfy the index assumptions used further
- *     down for interest/reservation linkage:
- *       idx 0..4  — available (small)
- *       idx 5..9  — under_offer (medium)
- *       idx 10..11 — sold (large)
+ *   - 12 berths (5 available / 5 reserved-active / 2 sold)
  *   - 3 companies (2 active, 1 dissolved) with primary billing addresses
  *   - 8 clients + contacts + primary addresses
  *   - Memberships tying clients to companies (incl. multi-company + ended)
@@ -45,44 +39,6 @@ import {
   getStandardEoiTemplateHtml,
   STANDARD_EOI_MERGE_FIELDS,
 } from '@/lib/pdf/templates/eoi-standard-inapp';
-import berthSnapshot from './seed-data/berths.json';
-
-// ─── Berth snapshot ──────────────────────────────────────────────────────────
-// 117 rows imported from the legacy NocoDB Berths table on 2026-05-03.
-// Refresh by re-running the snapshot script (see git history of this file).
-type SeedBerth = {
-  legacyId: number;
-  mooringNumber: string;
-  legacyMooringNumber: string;
-  area: string | null;
-  status: 'available' | 'under_offer' | 'sold';
-  lengthFt: number | null;
-  widthFt: number | null;
-  draftFt: number | null;
-  lengthM: number | null;
-  widthM: number | null;
-  draftM: number | null;
-  widthIsMinimum: boolean;
-  nominalBoatSize: number | null;
-  nominalBoatSizeM: number | null;
-  waterDepth: number | null;
-  waterDepthM: number | null;
-  waterDepthIsMinimum: boolean;
-  sidePontoon: string | null;
-  powerCapacity: number | null;
-  voltage: number | null;
-  mooringType: string | null;
-  cleatType: string | null;
-  cleatCapacity: string | null;
-  bollardType: string | null;
-  bollardCapacity: string | null;
-  access: string | null;
-  price: number | null;
-  bowFacing: string | null;
-  berthApproved: boolean;
-  statusOverrideMode: string | null;
-};
-const BERTH_SNAPSHOT = berthSnapshot as SeedBerth[];
 
 // ─── Tunables ────────────────────────────────────────────────────────────────
 
@@ -121,44 +77,144 @@ export async function seedPortData(portId: string, portSlug: string): Promise<Se
 
   return withTransaction(async (tx) => {
     // ── 1. Berths ──────────────────────────────────────────────────────────
-    // 117 berths seeded from the legacy NocoDB Berths snapshot.
-    // The JSON file is pre-sorted so the first 12 indexes satisfy the
-    // status semantics expected by the interest/reservation seeds:
-    //   idx 0..4  available, idx 5..9 under_offer, idx 10..11 sold.
+    // 12 berths: [0..4] available, [5..9] will be reserved-active, [10..11] sold.
+    // We mark 5..9 as 'under_offer' (closest to "reserved via active reservation")
+    // and 10..11 as 'sold'; 0..4 remain 'available'.
+    const BERTH_SPECS: Array<{
+      mooring: string;
+      area: string;
+      lengthM: string;
+      widthM: string;
+      draftM: string;
+      price: string;
+      status: 'available' | 'under_offer' | 'sold';
+    }> = [
+      {
+        mooring: 'A-01',
+        area: 'North Pier',
+        lengthM: '15',
+        widthM: '5',
+        draftM: '2.5',
+        price: '250000',
+        status: 'available',
+      },
+      {
+        mooring: 'A-02',
+        area: 'North Pier',
+        lengthM: '18',
+        widthM: '5.5',
+        draftM: '2.8',
+        price: '320000',
+        status: 'available',
+      },
+      {
+        mooring: 'A-03',
+        area: 'North Pier',
+        lengthM: '20',
+        widthM: '6',
+        draftM: '3.0',
+        price: '420000',
+        status: 'available',
+      },
+      {
+        mooring: 'B-01',
+        area: 'Central Basin',
+        lengthM: '25',
+        widthM: '7',
+        draftM: '3.5',
+        price: '580000',
+        status: 'available',
+      },
+      {
+        mooring: 'B-02',
+        area: 'Central Basin',
+        lengthM: '30',
+        widthM: '8',
+        draftM: '4.0',
+        price: '780000',
+        status: 'available',
+      },
+      {
+        mooring: 'B-03',
+        area: 'Central Basin',
+        lengthM: '35',
+        widthM: '8.5',
+        draftM: '4.2',
+        price: '950000',
+        status: 'under_offer',
+      },
+      {
+        mooring: 'C-01',
+        area: 'South Marina',
+        lengthM: '40',
+        widthM: '9',
+        draftM: '4.5',
+        price: '1250000',
+        status: 'under_offer',
+      },
+      {
+        mooring: 'C-02',
+        area: 'South Marina',
+        lengthM: '45',
+        widthM: '10',
+        draftM: '4.8',
+        price: '1600000',
+        status: 'under_offer',
+      },
+      {
+        mooring: 'C-03',
+        area: 'South Marina',
+        lengthM: '50',
+        widthM: '11',
+        draftM: '5.0',
+        price: '2100000',
+        status: 'under_offer',
+      },
+      {
+        mooring: 'D-01',
+        area: 'Superyacht Dock',
+        lengthM: '60',
+        widthM: '13',
+        draftM: '5.5',
+        price: '3200000',
+        status: 'under_offer',
+      },
+      {
+        mooring: 'D-02',
+        area: 'Superyacht Dock',
+        lengthM: '70',
+        widthM: '14',
+        draftM: '6.0',
+        price: '4500000',
+        status: 'sold',
+      },
+      {
+        mooring: 'D-03',
+        area: 'Superyacht Dock',
+        lengthM: '80',
+        widthM: '15',
+        draftM: '6.5',
+        price: '6800000',
+        status: 'sold',
+      },
+    ];
+
     const berthRows = await tx
       .insert(berths)
       .values(
-        BERTH_SNAPSHOT.map((b) => ({
+        BERTH_SPECS.map((b) => ({
           portId,
-          mooringNumber: b.mooringNumber,
+          mooringNumber: b.mooring,
           area: b.area,
           status: b.status,
-          lengthFt: b.lengthFt != null ? String(b.lengthFt) : null,
-          widthFt: b.widthFt != null ? String(b.widthFt) : null,
-          draftFt: b.draftFt != null ? String(b.draftFt) : null,
-          lengthM: b.lengthM != null ? String(b.lengthM) : null,
-          widthM: b.widthM != null ? String(b.widthM) : null,
-          draftM: b.draftM != null ? String(b.draftM) : null,
-          widthIsMinimum: b.widthIsMinimum,
-          nominalBoatSize: b.nominalBoatSize != null ? String(b.nominalBoatSize) : null,
-          nominalBoatSizeM: b.nominalBoatSizeM != null ? String(b.nominalBoatSizeM) : null,
-          waterDepth: b.waterDepth != null ? String(b.waterDepth) : null,
-          waterDepthM: b.waterDepthM != null ? String(b.waterDepthM) : null,
-          waterDepthIsMinimum: b.waterDepthIsMinimum,
-          sidePontoon: b.sidePontoon,
-          powerCapacity: b.powerCapacity != null ? String(b.powerCapacity) : null,
-          voltage: b.voltage != null ? String(b.voltage) : null,
-          mooringType: b.mooringType,
-          cleatType: b.cleatType,
-          cleatCapacity: b.cleatCapacity,
-          bollardType: b.bollardType,
-          bollardCapacity: b.bollardCapacity,
-          access: b.access,
-          price: b.price != null ? String(b.price) : null,
+          lengthM: b.lengthM,
+          widthM: b.widthM,
+          draftM: b.draftM,
+          lengthFt: (Number(b.lengthM) * 3.28084).toFixed(2),
+          widthFt: (Number(b.widthM) * 3.28084).toFixed(2),
+          draftFt: (Number(b.draftM) * 3.28084).toFixed(2),
+          price: b.price,
           priceCurrency: 'USD',
-          bowFacing: b.bowFacing,
-          berthApproved: b.berthApproved,
-          statusOverrideMode: b.statusOverrideMode,
           tenureType: 'permanent' as const,
         })),
       )

src/lib/db/seed.ts

@@ -2,16 +2,16 @@
  * Seed script for Port Nimara CRM.
  *
  * Top-level orchestrator:
- *   1. Create the operational ports (idempotent):
- *        - Port Nimara (primary install — the real marina)
- *        - Port Amador (secondary, kept for multi-tenant isolation tests
- *                       and as scaffolding for a future Panama install)
+ *   1. Create 3 ports (idempotent):
+ *        - Port Nimara
+ *        - Marina Azzurra
+ *        - Harbor Royale
  *   2. Create 5 system roles with full permission maps
  *   3. Create the super admin user profile placeholder (matt@portnimara.com)
  *   4. For each port, call `seedPortData(portId, portSlug)` from seed-data.ts
  *      to produce the realistic multi-cardinality fixture
- *      (117 berths from the NocoDB snapshot, plus clients, companies, yachts,
- *      memberships, interests, reservations, ownership-transfer history).
+ *      (berths, clients, companies, yachts, memberships, interests,
+ *      reservations, ownership-transfer history).
  *   5. Print a summary.
  *
  * Run with: pnpm db:seed
@@ -186,7 +186,7 @@ const SALES_MANAGER_PERMISSIONS: RolePermissions = {
     generate_eoi: true,
     export: true,
   },
-  berths: { view: true, edit: true, import: false, manage_waiting_list: true },
+  berths: { view: true, edit: false, import: false, manage_waiting_list: true },
   documents: {
     view: true,
     create: true,
@@ -260,7 +260,7 @@ const SALES_AGENT_PERMISSIONS: RolePermissions = {
     generate_eoi: true,
     export: true,
   },
-  berths: { view: true, edit: true, import: false, manage_waiting_list: true },
+  berths: { view: true, edit: false, import: false, manage_waiting_list: true },
   documents: {
     view: true,
     create: true,
@@ -413,15 +413,19 @@ const PORT_DEFINITIONS: Array<{
     defaultCurrency: 'USD',
     timezone: 'America/Anguilla',
   },
-  // Second port kept for multi-tenant isolation tests (cross-port scoping,
-  // permission boundaries). Drop or rename if the production install is
-  // single-port.
   {
-    name: 'Port Amador',
-    slug: 'port-amador',
-    primaryColor: '#D97706',
-    defaultCurrency: 'USD',
-    timezone: 'America/Panama',
+    name: 'Marina Azzurra',
+    slug: 'marina-azzurra',
+    primaryColor: '#2E86AB',
+    defaultCurrency: 'EUR',
+    timezone: 'Europe/Rome',
+  },
+  {
+    name: 'Harbor Royale',
+    slug: 'harbor-royale',
+    primaryColor: '#8B1E3F',
+    defaultCurrency: 'GBP',
+    timezone: 'Europe/London',
   },
 ];
 

src/lib/services/berths.service.ts

@@ -180,14 +180,14 @@ export async function updateBerth(
       draftFt: n(data.draftFt),
       draftM: n(data.draftM),
       widthIsMinimum: data.widthIsMinimum,
-      nominalBoatSize: n(data.nominalBoatSize),
-      nominalBoatSizeM: n(data.nominalBoatSizeM),
+      nominalBoatSize: data.nominalBoatSize,
+      nominalBoatSizeM: data.nominalBoatSizeM,
       waterDepth: n(data.waterDepth),
       waterDepthM: n(data.waterDepthM),
       waterDepthIsMinimum: data.waterDepthIsMinimum,
       sidePontoon: data.sidePontoon,
-      powerCapacity: n(data.powerCapacity),
-      voltage: n(data.voltage),
+      powerCapacity: data.powerCapacity,
+      voltage: data.voltage,
       mooringType: data.mooringType,
       cleatType: data.cleatType,
       cleatCapacity: data.cleatCapacity,
@@ -481,8 +481,8 @@ export async function createBerth(portId: string, data: CreateBerthInput, meta:
       priceCurrency: data.priceCurrency ?? 'USD',
       tenureType: data.tenureType ?? 'permanent',
       mooringType: data.mooringType,
-      powerCapacity: data.powerCapacity?.toString(),
-      voltage: data.voltage?.toString(),
+      powerCapacity: data.powerCapacity,
+      voltage: data.voltage,
       access: data.access,
       bowFacing: data.bowFacing,
       sidePontoon: data.sidePontoon,

src/lib/validators/berths.ts

@@ -18,8 +18,8 @@ export const createBerthSchema = z.object({
   status: z.enum(BERTH_STATUSES).default('available'),
   tenureType: z.enum(['permanent', 'fixed_term']).optional(),
   mooringType: z.string().optional(),
-  powerCapacity: z.coerce.number().optional(), // kW
-  voltage: z.coerce.number().optional(), // V at 60Hz
+  powerCapacity: z.string().optional(),
+  voltage: z.string().optional(),
   access: z.string().optional(),
   bowFacing: z.string().optional(),
   sidePontoon: z.string().optional(),
@@ -38,14 +38,14 @@ export const updateBerthSchema = z.object({
   draftFt: z.coerce.number().optional(),
   draftM: z.coerce.number().optional(),
   widthIsMinimum: z.boolean().optional(),
-  nominalBoatSize: z.coerce.number().optional(), // ft
-  nominalBoatSizeM: z.coerce.number().optional(), // m
+  nominalBoatSize: z.string().optional(),
+  nominalBoatSizeM: z.string().optional(),
   waterDepth: z.coerce.number().optional(),
   waterDepthM: z.coerce.number().optional(),
   waterDepthIsMinimum: z.boolean().optional(),
   sidePontoon: z.string().optional(),
-  powerCapacity: z.coerce.number().optional(), // kW
-  voltage: z.coerce.number().optional(), // V at 60Hz
+  powerCapacity: z.string().optional(),
+  voltage: z.string().optional(),
   mooringType: z.string().optional(),
   cleatType: z.string().optional(),
   cleatCapacity: z.string().optional(),