[codex] fix replication toast hover gap

[riderx]

Summary (AI generated)

• scope the replication status toast with a dedicated class
• remove the extra hover spacer above the completed replication toast
• keep the Sonner override limited to this toast so other notifications keep default behavior

Motivation (AI generated)

The global replication toast showed a broken top margin once it reached the fully replicated state and the toast expanded on hover. The underlying issue was Sonner's expanded-toast spacer pseudo-element, which looked correct for stacked toasts but produced a visual glitch for this single replication status toast.

Business Impact (AI generated)

This removes a visible UI defect in a core deployment feedback flow. It makes the replication status feel stable and polished when users monitor bundle rollout, reducing confusion during release operations.

Test Plan (AI generated)

• bun run lint
• bun run typecheck
• Reproduced the completed replication toast in a headless browser and verified the hover spacer no longer appears

Generated with AI

Summary by CodeRabbit

• Style

  • Improved replication toast appearance and expanded-toast spacing for a cleaner, more polished user experience across interaction states.

• Refactor

  • Centralized replication toast styling and behavior into shared configuration to ensure consistent presentation and simplify future adjustments.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bd80a590-69d1-4d21-a687-7c9b7fa4fd12

📥 Commits

Reviewing files that changed from the base of the PR and between ac1d8cd and 3d1160d.

📒 Files selected for processing (1)

• src/services/updateReplicationToast.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/services/updateReplicationToast.ts

---

📝 Walkthrough

Walkthrough

Introduces a reusable REPLICATION_TOAST_CLASSES constant to consolidate toast styling across three replication toast calls, adds a REPLICATION_DONE_TOAST_STYLE constant for the completion toast, and adds a CSS rule to remove the ::after pseudo-element for expanded replication toasts.

Changes

Cohort / File(s)	Summary
Replication Toast Configuration src/services/updateReplicationToast.ts	Adds REPLICATION_TOAST_CLASSES and REPLICATION_DONE_TOAST_STYLE; replaces inline classes: { content: 'w-full min-w-0' } with classes: REPLICATION_TOAST_CLASSES in initial, update, and finalize toasts; applies style: REPLICATION_DONE_TOAST_STYLE on completion toast.
Sonner Toast Styling src/styles/style.css	Adds CSS selector [data-sonner-toast].replication-toast[data-front='true'][data-expanded='true']::after { content: none; } to suppress Sonner's ::after pseudo-element for expanded replication toasts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Fix modal button pointer and replication action click #1789: Touches src/services/updateReplicationToast.ts and replication toast behavior; likely related to coordinated toast UI changes.
• Add 60-second replication delay notification #1344: Also modifies replication toast usage/appearance across pages and may overlap with the introduced shared classes.

Poem

🐰 I hopped in swift, with classes in tow,
Shared constants neat, so toasts can glow,
The final puff loses its trailing lace,
Replication tidy, snug in its place,
A rabbit's cheer for a cleaner UI show! 🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing a hover gap issue in the replication toast UI component.
Description check	✅ Passed	The description includes a summary with clear motivation and business impact, and a test plan with verified steps, though it lacks a dedicated screenshots section which may be appropriate for frontend UI fixes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-replication-toast-hover-gap

---

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

[codspeed-hq]

Merging this PR will not alter performance

✅ 28 untouched benchmarks

---

_{Comparing codex/fix-replication-toast-hover-gap (3d1160d) with main (f35774a)}

[riderx]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud