Two-button toasts wrap their buttons; bell dismiss no longer covers the timestamp

[uzayer]

Follow-up to #399 and #400. These are layout fixes only; no behaviour changes.

Toast layout

Sonner puts the icon, the text and the buttons in a single flex row. With two actions (Open + Retry, Open settings + Retry, Open + Rebase or merge…), the buttons took about 150px, so the title and body wrapped every few words.

Now, when a toast has a cancel slot (that is, two buttons):

• the text takes the whole first row beside the icon;
• the buttons wrap onto their own row, right-aligned.

Sonner gives every button an auto start margin, which split the space between the two buttons on their own row. Only the first button keeps it now. One-button toasts are unchanged and stay inline. The change is CSS only, in globals.css, next to the existing toast description override, with the same specificity prefix.

Bell card

The ✕ that appears on hover sat on top of the "time ago" label. Now the label fades out while the card is hovered, or while the ✕ has keyboard focus, and the ✕ takes its place, aligned with the title row. The ✕ also gains an aria-label.

Tested

In bun run dev (Chrome):

• Two-button toasts: both look right, with the text at full width and the buttons together bottom-right:
  • auto-fetch failure (Open, Retry);
  • agent-update failure with a long npm error (Open settings, Retry).
• One-button toast: "behind its remote" (Open) is unchanged and inline.
• Bell card: hovering swaps the timestamp for the ✕ with no overlap.

bun run ci:local is green. The Linux and Windows app jobs were skipped locally.

Not tested

• The Tauri WebKit webview (dev:app or a release build). :has() is supported there (Safari 15.4+), but I only checked in Chrome.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1478fab8-f688-44ef-b03e-3404ee9e9c14

---

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

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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