fix(ui): stop first-row home widgets overlapping on mobile (#11752)

[lalalune]

Root cause

Home-slot widgets rendered a bare HomeWidgetCard (a flex w-full button) with no grid-span wrapper. As direct children of the 4-column home grid, each fell back to a single auto-placed 1-column track — so two widgets could be auto-placed into overlapping areas, producing the reported first-row collision ("Overdr[icon]wn$.." — finances "Overdrawn" colliding with the goals icon/value).

Fix

Every home widget now wraps its card in <div className="min-w-0 {spanClassName}">, so the widget's root grid item carries the host-provided col-span and each widget occupies a distinct, non-overlapping grid area. Added a spanClassName field to the widget type (mirrors WidgetProps.spanClassName), applied on the home slot only, absent elsewhere. Touches the 8 home widgets (agent-orchestrator, finances-alerts, goals-attention, health-sleep, inbox-unread, needs-attention, notifications, todo) + types.ts + home-widget-card.tsx.

Not a z-index band-aid — the grid items now genuinely span correctly.

Verification

• New test packages/ui/src/widgets/WidgetHost.home-span.test.tsx (4/4): asserts each home widget's root element carries the host col-span so two 2-col widgets share one 4-col row as distinct areas (a bare card with no span wrapper is the failing case it guards).
• Broader widget/home suite: 185/185 across 30 files.
• Regenerated home-screen e2e screenshots (__e2e__/output-home/*.png) — row 1 no longer overlaps.
• biome clean, typecheck clean.

Evidence: .github/issue-evidence/11752-widget-overlap/. Closes #11752.

🤖 Generated with Claude Code

[greptile-apps]

Your trial has ended. Reactivate Greptile to resume code reviews.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7b6abf78-f861-495c-85e4-83ca1fa9d743

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/11752-widget-overlap

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Your trial has ended. Reactivate Greptile to resume code reviews.

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.