From cad55e3565e40b5e7eb7016f3d8908a0999a7a51 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Sun, 3 May 2026 16:03:56 +0200
Subject: [PATCH] fix(mobile): clipping, dropdown-tabs and stale phone metadata
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  7 +-
 src/components/berths/berth-tabs.tsx          |  7 +-
 src/components/clients/contacts-editor.tsx    | 56 +++++++-----
 src/components/shared/responsive-tabs.tsx     | 88 ++++++++++---------
 4 files changed, 87 insertions(+), 71 deletions(-)

diff --git a/src/components/berths/berth-detail-header.tsx b/src/components/berths/berth-detail-header.tsx
index 9558c84..bf21623 100644
--- a/src/components/berths/berth-detail-header.tsx
+++ b/src/components/berths/berth-detail-header.tsx
@@ -167,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">
@@ -182,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" />
diff --git a/src/components/berths/berth-tabs.tsx b/src/components/berths/berth-tabs.tsx
index 2fb1514..a703d00 100644
--- a/src/components/berths/berth-tabs.tsx
+++ b/src/components/berths/berth-tabs.tsx
@@ -48,10 +48,13 @@ 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>
   );
 }
diff --git a/src/components/clients/contacts-editor.tsx b/src/components/clients/contacts-editor.tsx
index f6fe92f..f277656 100644
--- a/src/components/clients/contacts-editor.tsx
+++ b/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"
diff --git a/src/components/shared/responsive-tabs.tsx b/src/components/shared/responsive-tabs.tsx
index 802e100..c7fc358 100644
--- a/src/components/shared/responsive-tabs.tsx
+++ b/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}