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>

tests/e2e/matrix/responsive-overflow.spec.ts

@@ -82,13 +82,39 @@ test.describe('Responsive overflow sweep', () => {
           // Elements whose right edge runs past the viewport by > 2px and are
           // actually visible (have size, not display:none).
           const offscreen: { tag: string; cls: string; right: number; text: string }[] = [];
+          const SVG_INTERNAL = new Set([
+            'svg',
+            'g',
+            'ellipse',
+            'path',
+            'circle',
+            'rect',
+            'line',
+            'polyline',
+            'polygon',
+          ]);
           const els = document.querySelectorAll('body *');
           for (const el of els) {
+            const tag = el.tagName.toLowerCase();
+            // Skip SVG internals (icons, the react-grab dev overlay, chart guts)
+            // — not layout-cutoff signal.
+            if (SVG_INTERNAL.has(tag)) continue;
             const r = (el as HTMLElement).getBoundingClientRect();
             if (r.width === 0 || r.height === 0) continue;
             if (r.right > vpWidth + 2 && r.left < vpWidth) {
-              // overflowing the right edge (partially clipped)
-              const tag = el.tagName.toLowerCase();
+              // Skip elements inside a horizontal-scroll container (data tables
+              // etc. scroll on purpose) — that's intended, not a clip.
+              let p: HTMLElement | null = el.parentElement;
+              let inScroll = false;
+              while (p) {
+                const ox = getComputedStyle(p).overflowX;
+                if (ox === 'auto' || ox === 'scroll') {
+                  inScroll = true;
+                  break;
+                }
+                p = p.parentElement;
+              }
+              if (inScroll) continue;
               const cls = ((el as HTMLElement).className || '').toString().slice(0, 40);
               const text = (el.textContent || '').trim().slice(0, 30);
               offscreen.push({ tag, cls, right: Math.round(r.right), text });