fix(ui): keep toast controls clickable above Reka modal dialogs - #14640
fix(ui): keep toast controls clickable above Reka modal dialogs#14640dante01yoon wants to merge 4 commits into
Conversation
Reka's modal mode sets pointer-events: none on the body via DismissableLayer. Toasts teleport to the body, so an open modal left them painted above the dialog but not hit-testable: a click on a toast's close button fell through to the dialog overlay underneath, which either swallowed it (pricing table) or dismissed the dialog (publishing flow). Opt toasts into the existing design-system pointer-events list, per message rather than on the .p-toast container so the empty space beside a toast stays an ordinary scrim click. Narrow the matching OUTSIDE_LAYER_SELECTORS entry to .p-toast-message for the same reason, and replace its stale rationale — the Settings focus-recovery case it described is now handled by dismissOnFocusOutside.
🌐 Website E2ETip All tests passed.
🔗 Website PreviewWebsite Preview: https://comfy-website-preview-pr-14640.vercel.app This commit: https://website-frontend-6h9p6ll8x-comfyui.vercel.app Last updated: 2026-08-16T06:39:11Z for |
🎨 Storybook: ✅ Built — View Storybook🎭 Playwright: ✅ 1816 passed, 0 failed · 2 flaky📊 Browser Reports
📦 Bundle: 8.85 MB gzip 🔴 +1 BDetailsSummary
Category Glance App Entry Points — 3.71 kB (baseline 3.71 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.37 MB (baseline 1.37 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration Status: 3 unchanged Views & Navigation — 124 kB (baseline 124 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces Status: 17 unchanged Panels & Settings — 565 kB (baseline 565 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens Status: 26 unchanged User & Accounts — 27.7 kB (baseline 27.7 kB) • ⚪ 0 BAuthentication, profile, and account management bundles Status: 11 unchanged Editors & Dialogs — 125 kB (baseline 125 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors Status: 8 unchanged UI Components — 67.1 kB (baseline 67.1 kB) • ⚪ 0 BReusable component library chunks Status: 14 unchanged Data & Services — 3.52 MB (baseline 3.52 MB) • ⚪ 0 BStores, services, APIs, and repositories Status: 17 unchanged Utilities & Hooks — 550 kB (baseline 550 kB) • ⚪ 0 BHelpers, composables, and utility bundles Status: 38 unchanged Vendor & Third-Party — 16.8 MB (baseline 16.8 MB) • ⚪ 0 BExternal libraries and shared vendor chunks Status: 18 unchanged Other — 14.2 MB (baseline 14.2 MB) • 🔴 +8 BBundles that do not match a named category
Status: 1 added / 1 removed / 284 unchanged ⚡ Performance Report
Show regressions
All metrics
Historical variance (last 15 runs)
Trend (last 15 commits on main)
Raw data{
"timestamp": "2026-08-16T06:49:52.784Z",
"gitSha": "37250c3f416bf6d8537d7b7b80c90e43718c42f9",
"branch": "glary/fe-1398-toast-clickable-over-modals",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2160.2859999998145,
"styleRecalcs": 8,
"styleRecalcDurationMs": 7.092999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 555.157,
"heapDeltaBytes": 5032512,
"heapUsedBytes": 69432536,
"domNodes": 16,
"jsHeapTotalBytes": 25165824,
"scriptDurationMs": 6.642,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "canvas-idle",
"durationMs": 2034.988999999996,
"styleRecalcs": 8,
"styleRecalcDurationMs": 7.691,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 476.90299999999996,
"heapDeltaBytes": 5184016,
"heapUsedBytes": 69693840,
"domNodes": 16,
"jsHeapTotalBytes": 24903680,
"scriptDurationMs": 7.808000000000001,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000012,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1858.0050000000483,
"styleRecalcs": 77,
"styleRecalcDurationMs": 34.315,
"layouts": 12,
"layoutDurationMs": 3.129,
"taskDurationMs": 867.244,
"heapDeltaBytes": -17662652,
"heapUsedBytes": 47003600,
"domNodes": -280,
"jsHeapTotalBytes": 23302144,
"scriptDurationMs": 109.487,
"eventListeners": -153,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1819.641000000047,
"styleRecalcs": 75,
"styleRecalcDurationMs": 40.825,
"layouts": 12,
"layoutDurationMs": 3.6,
"taskDurationMs": 871.796,
"heapDeltaBytes": -153208,
"heapUsedBytes": 64456744,
"domNodes": 57,
"jsHeapTotalBytes": 25427968,
"scriptDurationMs": 120.72200000000001,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1722.6309999998648,
"styleRecalcs": 32,
"styleRecalcDurationMs": 15.777,
"layouts": 6,
"layoutDurationMs": 0.642,
"taskDurationMs": 351.985,
"heapDeltaBytes": 7986904,
"heapUsedBytes": 72736392,
"domNodes": 78,
"jsHeapTotalBytes": 25427968,
"scriptDurationMs": 8.169,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1722.1300000001065,
"styleRecalcs": 32,
"styleRecalcDurationMs": 16.242,
"layouts": 6,
"layoutDurationMs": 0.5579999999999999,
"taskDurationMs": 361.072,
"heapDeltaBytes": 8046108,
"heapUsedBytes": 72694204,
"domNodes": 77,
"jsHeapTotalBytes": 24903680,
"scriptDurationMs": 8.722000000000001,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "dom-widget-clipping",
"durationMs": 556.983000000173,
"styleRecalcs": 11,
"styleRecalcDurationMs": 7.454000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 367.40900000000005,
"heapDeltaBytes": -11336060,
"heapUsedBytes": 53146080,
"domNodes": 18,
"jsHeapTotalBytes": 25952256,
"scriptDurationMs": 55.68899999999999,
"eventListeners": 0,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "dom-widget-clipping",
"durationMs": 633.2849999998871,
"styleRecalcs": 10,
"styleRecalcDurationMs": 8.639999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 416.778,
"heapDeltaBytes": -11337772,
"heapUsedBytes": 53157888,
"domNodes": 16,
"jsHeapTotalBytes": 25427968,
"scriptDurationMs": 64.242,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "large-graph-idle",
"durationMs": 2051.484000000073,
"styleRecalcs": 9,
"styleRecalcDurationMs": 6.8359999999999985,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 583.0040000000001,
"heapDeltaBytes": 11356484,
"heapUsedBytes": 71290664,
"domNodes": -283,
"jsHeapTotalBytes": 2981888,
"scriptDurationMs": 12.293999999999995,
"eventListeners": -179,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-idle",
"durationMs": 2010.054000000082,
"styleRecalcs": 8,
"styleRecalcDurationMs": 8.007,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 517.999,
"heapDeltaBytes": 12626588,
"heapUsedBytes": 72096632,
"domNodes": -281,
"jsHeapTotalBytes": 2719744,
"scriptDurationMs": 15.325999999999999,
"eventListeners": -149,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "large-graph-pan",
"durationMs": 2186.826999999994,
"styleRecalcs": 69,
"styleRecalcDurationMs": 13.799999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1190.658,
"heapDeltaBytes": 10622732,
"heapUsedBytes": 71199708,
"domNodes": -285,
"jsHeapTotalBytes": 3174400,
"scriptDurationMs": 347.969,
"eventListeners": -149,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "large-graph-pan",
"durationMs": 2199.8429999998734,
"styleRecalcs": 69,
"styleRecalcDurationMs": 14.498999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1167.9740000000002,
"heapDeltaBytes": -153028,
"heapUsedBytes": 60653744,
"domNodes": -284,
"jsHeapTotalBytes": 3698688,
"scriptDurationMs": 330.899,
"eventListeners": -181,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-zoom",
"durationMs": 3152.2079999999733,
"styleRecalcs": 63,
"styleRecalcDurationMs": 11.966999999999995,
"layouts": 60,
"layoutDurationMs": 6.885000000000001,
"taskDurationMs": 1330.493,
"heapDeltaBytes": -7143460,
"heapUsedBytes": 55502372,
"domNodes": -290,
"jsHeapTotalBytes": 2981888,
"scriptDurationMs": 388.974,
"eventListeners": -153,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-zoom",
"durationMs": 3199.4029999998475,
"styleRecalcs": 65,
"styleRecalcDurationMs": 14.448999999999996,
"layouts": 60,
"layoutDurationMs": 7.363999999999999,
"taskDurationMs": 1372.763,
"heapDeltaBytes": -5693820,
"heapUsedBytes": 58263236,
"domNodes": -285,
"jsHeapTotalBytes": 4292608,
"scriptDurationMs": 394.78000000000003,
"eventListeners": -153,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "minimap-idle",
"durationMs": 2039.1770000001088,
"styleRecalcs": 8,
"styleRecalcDurationMs": 6.506000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 589.4900000000001,
"heapDeltaBytes": 12332244,
"heapUsedBytes": 73256316,
"domNodes": -283,
"jsHeapTotalBytes": 2719744,
"scriptDurationMs": 11.465000000000003,
"eventListeners": -179,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "minimap-idle",
"durationMs": 2037.6220000000558,
"styleRecalcs": 8,
"styleRecalcDurationMs": 6.821000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 585.031,
"heapDeltaBytes": 12869336,
"heapUsedBytes": 73780332,
"domNodes": -283,
"jsHeapTotalBytes": 2719744,
"scriptDurationMs": 15.823999999999998,
"eventListeners": -179,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 579.5009999999365,
"styleRecalcs": 47,
"styleRecalcDurationMs": 10.489,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 394.614,
"heapDeltaBytes": -10473804,
"heapUsedBytes": 54144444,
"domNodes": 20,
"jsHeapTotalBytes": 25690112,
"scriptDurationMs": 118.436,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 612.3069999998734,
"styleRecalcs": 46,
"styleRecalcDurationMs": 9.746,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 401.98100000000005,
"heapDeltaBytes": -10190852,
"heapUsedBytes": 54455988,
"domNodes": 18,
"jsHeapTotalBytes": 25952256,
"scriptDurationMs": 120.086,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-idle",
"durationMs": 2005.4540000000998,
"styleRecalcs": 9,
"styleRecalcDurationMs": 7.866999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 440.45199999999994,
"heapDeltaBytes": 5105880,
"heapUsedBytes": 69694976,
"domNodes": 18,
"jsHeapTotalBytes": 25165824,
"scriptDurationMs": 5.369000000000001,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-idle",
"durationMs": 2004.3609999997898,
"styleRecalcs": 10,
"styleRecalcDurationMs": 10.101,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 493.22700000000003,
"heapDeltaBytes": 5230720,
"heapUsedBytes": 69975380,
"domNodes": 20,
"jsHeapTotalBytes": 24903680,
"scriptDurationMs": 8.371000000000002,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1673.9179999999578,
"styleRecalcs": 75,
"styleRecalcDurationMs": 31.601000000000003,
"layouts": 16,
"layoutDurationMs": 3.8120000000000003,
"taskDurationMs": 730.518,
"heapDeltaBytes": -4208988,
"heapUsedBytes": 60390576,
"domNodes": 61,
"jsHeapTotalBytes": 25165824,
"scriptDurationMs": 80.764,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1722.13899999997,
"styleRecalcs": 76,
"styleRecalcDurationMs": 40.25300000000001,
"layouts": 16,
"layoutDurationMs": 4.871,
"taskDurationMs": 817.81,
"heapDeltaBytes": -4011112,
"heapUsedBytes": 60734940,
"domNodes": 62,
"jsHeapTotalBytes": 25690112,
"scriptDurationMs": 92.361,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "subgraph-transition-enter",
"durationMs": 1417.1229999999468,
"styleRecalcs": 19,
"styleRecalcDurationMs": 32.417999999999985,
"layouts": 14,
"layoutDurationMs": 13.134999999999998,
"taskDurationMs": 972.1439999999999,
"heapDeltaBytes": -5862480,
"heapUsedBytes": 76374772,
"domNodes": 13673,
"jsHeapTotalBytes": 9175040,
"scriptDurationMs": 19.473000000000003,
"eventListeners": 2375,
"totalBlockingTimeMs": 150,
"frameDurationMs": 16.666666666666696,
"p95FrameDurationMs": 16.80000000000109
},
{
"name": "viewport-pan-sweep",
"durationMs": 8159.294999999929,
"styleRecalcs": 249,
"styleRecalcDurationMs": 35.932,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 3998.4,
"heapDeltaBytes": 15686508,
"heapUsedBytes": 75975600,
"domNodes": -283,
"jsHeapTotalBytes": 3174400,
"scriptDurationMs": 1023.8609999999999,
"eventListeners": -133,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "viewport-pan-sweep",
"durationMs": 8280.052999999953,
"styleRecalcs": 250,
"styleRecalcDurationMs": 37.86,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 4065.6330000000003,
"heapDeltaBytes": 14372796,
"heapUsedBytes": 73825136,
"domNodes": -282,
"jsHeapTotalBytes": 3174400,
"scriptDurationMs": 1038.2800000000002,
"eventListeners": -135,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-idle",
"durationMs": 16889.216000000033,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 15931.544,
"heapDeltaBytes": -39871040,
"heapUsedBytes": 170536240,
"domNodes": -8312,
"jsHeapTotalBytes": -11210752,
"scriptDurationMs": 106.37400000000001,
"eventListeners": -16389,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.776666666666642,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-idle",
"durationMs": 16353.335000000015,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 15323.695,
"heapDeltaBytes": -26206548,
"heapUsedBytes": 170680896,
"domNodes": -8312,
"jsHeapTotalBytes": -4136960,
"scriptDurationMs": 104.277,
"eventListeners": -16387,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.220000000000073,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 20768.624000000047,
"styleRecalcs": 175,
"styleRecalcDurationMs": 17.33899999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 20152.766999999996,
"heapDeltaBytes": -27642420,
"heapUsedBytes": 182640288,
"domNodes": -8312,
"jsHeapTotalBytes": -9973760,
"scriptDurationMs": 437.057,
"eventListeners": -16383,
"totalBlockingTimeMs": 50,
"frameDurationMs": 17.776666666666642,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 20613.32900000002,
"styleRecalcs": 171,
"styleRecalcDurationMs": 16.934000000000005,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 19972.535,
"heapDeltaBytes": -35337800,
"heapUsedBytes": 162574052,
"domNodes": -8315,
"jsHeapTotalBytes": -12787712,
"scriptDurationMs": 427.242,
"eventListeners": -16385,
"totalBlockingTimeMs": 59,
"frameDurationMs": 17.776666666666642,
"p95FrameDurationMs": 16.80000000000291
},
{
"name": "workflow-execution",
"durationMs": 441.9470000000274,
"styleRecalcs": 13,
"styleRecalcDurationMs": 21.177,
"layouts": 3,
"layoutDurationMs": 0.6050000000000001,
"taskDurationMs": 109.805,
"heapDeltaBytes": 4958760,
"heapUsedBytes": 68648084,
"domNodes": 126,
"jsHeapTotalBytes": 4456448,
"scriptDurationMs": 6.923,
"eventListeners": 99,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "workflow-execution",
"durationMs": 495.0589999998556,
"styleRecalcs": 12,
"styleRecalcDurationMs": 22.486,
"layouts": 3,
"layoutDurationMs": 0.7289999999999999,
"taskDurationMs": 119.37900000000002,
"heapDeltaBytes": 4929228,
"heapUsedBytes": 68667612,
"domNodes": 123,
"jsHeapTotalBytes": 4980736,
"scriptDurationMs": 6.586999999999999,
"eventListeners": 97,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
}
]
} |
|
Warning Review limit reached
Next review available in: 45 minutes Limit details: You’ve used all 4 included reviews currently available under your plan. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis change makes individual PrimeVue toast messages interactive while keeping empty toast-container space outside dialog overlays. Tests verify toast dismissal and pricing dialog persistence. ChangesToast interaction in dialogs
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 6✅ Passed checks (6 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@browser_tests/tests/dialogs/pricingTableDeepLink.spec.ts`:
- Around line 539-543: Scope the toast locator in the dialog pricing deep-link
test to the injected error toast by filtering on its unique detail text, rather
than matching all error toasts. Within that scoped toast, locate and click the
close button by its accessible name, then retain the retry-safe count assertion
for that specific toast.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: af1023e6-e2af-4356-a568-8c37e5769a0a
📒 Files selected for processing (4)
browser_tests/tests/dialogs/pricingTableDeepLink.spec.tspackages/design-system/src/css/style.csssrc/components/dialog/GlobalDialog.test.tssrc/components/dialog/rekaPrimeVueBridge.ts
Codecov Report✅ All modified and coverable lines are covered by tests. @@ Coverage Diff @@
## main #14640 +/- ##
==========================================
- Coverage 78.65% 76.56% -2.09%
==========================================
Files 2211 2208 -3
Lines 116605 121641 +5036
Branches 33130 38974 +5844
==========================================
+ Hits 91715 93134 +1419
- Misses 24379 27843 +3464
- Partials 511 664 +153
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 523 files with indirect coverage changes 🚀 New features to boost your workflow:
|
Filter the toast by its detail text instead of matching every error toast, and share the detail string between the injection and the locator so they cannot drift.
|
Pushed
That Re-verified after the change: still fails without the fix ( @christian-byrne your approval was auto-dismissed by the push — re-approval needed when you get a chance. |
📄 Knowledge reviewDosu skipped reviewing this PR because your organization has used its |
PR Created by the Glary-Bot Agent
Supersedes #14448 (same root cause, moved to the canonical location and narrowed; that PR can be closed).
What
Reka's modal mode sets
pointer-events: noneon<body>viaDismissableLayer/useBodyScrollLock. Toasts teleport to<body>, so an open modal left them painted above the dialog (toast isz-index: 10000, dialogs are1700+) but not hit-testable — the click fell through to the dialog overlay underneath.That single cause produced both reported symptoms:
dismissableMask: false): the overlay swallowed the click, so the toast X did nothing.The repro is exact — before this change Playwright reports the click as intercepted:
Changes
packages/design-system/src/css/style.css— add toasts to the pointer-events opt-in list that already exists for the other body-portaled PrimeVue overlays (Select / ColorPicker / Popover / Autocomplete), same block, same rationale.src/components/dialog/rekaPrimeVueBridge.ts— narrow theOUTSIDE_LAYER_SELECTORSentry from.p-toastto.p-toast-messageand replace its stale rationale.Both use
.p-toast-messagerather than the.p-toastcontainer: the container spans the whole stack including the1remmargin between messages, so opting in there would make invisible empty space swallow scrim clicks. Scoping to the message keeps the interactive region and the "treated as inside" region identical.On the
OUTSIDE_LAYER_SELECTORShalf of FE-1398 — the entry is narrowed, not removed. Its original justification (Settings focus-recovery) did go stale oncedismissOnFocusOutside: falselanded in #13510/#14024, but the entry is now load-bearing for a different reason: with toasts actually clickable again, it is what stops a toast dismissal from taking the dialog underneath with it. Removing it would reintroduce the publishing-flow symptom, so the comment is corrected instead.Tests
pricingTableDeepLink.spec.ts— new E2E: open "Choose a Plan", raise an error toast, click its X; asserts the toast closes and the dialog survives. Verified to fail on the unfixed tree with the interception error above, and pass after.GlobalDialog.test.ts—p-toast-messageadded to the pointer-down and focus-outside guard lists, plus a case asserting a pointer-down on the bare.p-toastcontainer still dismisses. All three fail against the old.p-toastselector.Verification
DISTRIBUTION=clouddev server).pricingTableDeepLink.spec.tscloud suite: 16/16 passed.pnpm test:unit: 14720 passed; 3 pre-existing failures (previewAny,onboardingCloudRoutes,GraphView) confirmed to fail identically on a clean tree.pnpm typecheck,pnpm typecheck:browser, oxlint, eslint, stylelint,pnpm format:check: all clean.Screenshots