cad55e3565
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>
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, type ReactNode } from 'react';
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
export interface ResponsiveTab {
|
|
id: string;
|
|
label: string;
|
|
content: ReactNode;
|
|
badge?: string | number;
|
|
}
|
|
|
|
interface ResponsiveTabsProps {
|
|
tabs: ResponsiveTab[];
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
}
|
|
|
|
/**
|
|
* 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}>
|
|
{/* 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>
|
|
|
|
{tabs.map((tab) => (
|
|
<TabsContent key={tab.id} value={tab.id} className="mt-4">
|
|
{tab.content}
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|