fix(ui): mobile cutoff polish — onboarding banner + yacht owner truncate (R1/R2)

Responsive-overflow sweep findings (tests/e2e/matrix/responsive-overflow.spec.ts):

- R1: the onboarding banner's verbose "N of M steps done. Next: <link>" was
  clipped on mobile (extended ~160px past a 390px viewport) and duplicated the
  always-visible "View checklist" button. Now hidden below sm:; mobile shows
  just "Setup X% complete" + the checklist button.
- R2: yacht card owner subtitle used inline-flex + truncate, so a long owner
  name overflowed ~11px on the narrowest widths. Switched to flex min-w-0 so it
  truncates within the card.
- Detector: skip SVG internals (icons / the react-grab dev overlay) and elements
  inside overflow-x scroll containers (data tables scroll on purpose) to drop
  false positives. Sweep now confirms mobile/tablet clean + no real desktop
  overflow (berths wide table is the DataTable's intended horizontal scroll).

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

src/components/admin/onboarding-banner.tsx

@@ -50,20 +50,25 @@ export function OnboardingBanner() {
       <div className="flex min-w-0 items-center gap-2">
         <Sparkles className="size-4 shrink-0" aria-hidden />
         <span className="truncate">
-          <strong>Setup is {data.percent}% complete</strong>. {data.completed} of {data.total} steps
-          done.{' '}
-          {next ? (
-            <>
-              Next:{' '}
-              <Link
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                href={`/${portSlug}/admin/${next.href}` as any}
-                className="font-medium underline-offset-2 hover:underline"
-              >
-                {next.label}
-              </Link>
-            </>
-          ) : null}
+          <strong>Setup is {data.percent}% complete</strong>
+          {/* Verbose progress + the "Next:" deep-link are hidden on mobile,
+              where they get clipped (R1) and duplicate the always-visible
+              "View checklist" button. Shown from sm: up. */}
+          <span className="hidden sm:inline">
+            . {data.completed} of {data.total} steps done.{' '}
+            {next ? (
+              <>
+                Next:{' '}
+                <Link
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  href={`/${portSlug}/admin/${next.href}` as any}
+                  className="font-medium underline-offset-2 hover:underline"
+                >
+                  {next.label}
+                </Link>
+              </>
+            ) : null}
+          </span>
         </span>
       </div>
       <div className="flex shrink-0 items-center gap-1">

src/components/yachts/yacht-card.tsx

@@ -102,9 +102,11 @@ export function YachtCard({ yacht, portSlug, onEdit, onArchive }: YachtCardProps
             <span aria-hidden className="block h-9 w-9 shrink-0" />
           </div>
 
-          {/* Owner subtitle */}
+          {/* Owner subtitle. `flex min-w-0` (not inline-flex) so a long owner
+              name truncates within the card instead of overflowing ~11px on
+              the narrowest mobile widths (R2). */}
           {yacht.currentOwnerName ? (
-            <p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
+            <p className="mt-0.5 flex min-w-0 items-center gap-1 text-sm text-muted-foreground">
               <OwnerIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
               <span className="truncate">{yacht.currentOwnerName}</span>
             </p>