Mobile web UI [5/7]: Give notification body text the width of its card

[alex-clickhouse]

Follow-up on #271, stacked on #296. Reported from the phone: notification body text was not using the width of its card.

The measurement

The card's inner row is 330px on a 412px viewport, but the body only got 191px:

card inner row          330px
  └─ text column        191px   flex-1, min-w-0
  └─ badge column       127px   shrink-0   ← fixed, whatever the viewport

Two short chips (pending, notify) held over a third of the card, and prose broke every four or five words.

The change

Below sm the badges take a row of their own above the title, and the text gets the full card. Body width 191px → 346px (+81%).

Two things found alongside it:

• Page padding. The scroll containers used p-6 — 48px of a 412px viewport spent on padding before the card's own p-4. Now p-4 md:p-6 across the three list pages.
• The priority dot was centred against the whole title block, so a title long enough to wrap left the dot floating beside its second line instead of marking the first. Now top-aligned with a small offset.

Also corrects a line from #295

PageHeader's title went flex-1 → flex-auto in #296 to stop the filter row collapsing it. That fixed the collapse but introduced a smaller problem: flex-auto grows to fill the line, which pushed the action buttons onto a row of their own and cost a row of vertical space.

The title never needed to grow — md:ml-auto on the actions is what right-aligns them on desktop. flex-initial (0 1 auto) sizes to content, which is the property that keeps the filter row from collapsing it, still truncates via min-w-0, and lets the actions sit alongside.

For the record, all three values behave differently in a wrapping flex row, and only the third is right here:

		effect in this header
flex-1	1 1 0%	contributes nothing to line-fitting → title collapses to 0px
flex-auto	1 1 auto	grows to fill → actions pushed to their own row
flex-initial	0 1 auto	sizes to content, shrinks to truncate → correct

Verification

• npm run build clean; eslint clean on the touched files (pre-existing warnings only)
• Re-measured all five migrated pages: 0px page overflow, every <h1> a real width
• 1280×900: desktop unchanged — badges stay beside the title from sm up, single header row, p-6 restored at md

Where this belongs

Every line here amends a file introduced in #295, so if you would rather it were folded into that PR than stacked on top, say so — it needs a force-push across the stack, which I did not want to do unasked.

[Copilot]

Pull request overview

Improves mobile list-page layouts and notification card readability without changing desktop behavior.

Changes:

• Moves notification badges above card text on small screens.
• Reduces mobile page padding across three list pages.
• Corrects PageHeader title flex sizing and priority-dot alignment.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
web/src/pages/TasksPage.tsx	Reduces mobile content padding.
web/src/pages/PlansPage.tsx	Reduces mobile content padding.
web/src/pages/NotificationsPage.tsx	Improves mobile card width, badge layout, and dot alignment.
web/src/components/ui/PageHeader.tsx	Prevents title growth from displacing actions.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[alex-clickhouse]

Rebased onto the updated #296. One hunk from this PR is gone: the PageHeader title switch to `flex-initial` was superseded upstream — #295 now sizes that wrapper as `w-full lg:w-auto lg:flex-none` in response to review, which covers the same "title growth must not displace the actions" case (the actions live inside the title row below `lg`, and it is `flex: none` above it). No behaviour lost; the commit message no longer claims it.

No review comments on this one otherwise.