fix(subscription): size pricing dialogs with Reka props#13633
Merged
Conversation
dosubot
Bot
added
the
size:S
Contributor
📝 WalkthroughWalkthrough
ChangesSubscription dialog sizing
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Important Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (4 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 |
🎨 Storybook: ✅ Built — View Storybook🎭 Playwright: ✅ 1701 passed, 0 failed · 2 flaky📊 Browser Reports
📦 Bundle: 7.84 MB gzip 🟢 -38 BDetailsSummary
Category Glance App Entry Points — 53.2 kB (baseline 53.2 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.26 MB (baseline 1.26 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 110 kB (baseline 110 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 11 added / 11 removed / 3 unchanged Panels & Settings — 553 kB (baseline 553 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 11 added / 11 removed / 16 unchanged User & Accounts — 29.1 kB (baseline 29.1 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 7 added / 7 removed / 3 unchanged Editors & Dialogs — 117 kB (baseline 117 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 4 added / 4 removed / 1 unchanged UI Components — 57.5 kB (baseline 57.5 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed / 8 unchanged Data & Services — 273 kB (baseline 273 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 13 added / 13 removed / 3 unchanged Utilities & Hooks — 3.41 MB (baseline 3.41 MB) • 🟢 -51 BHelpers, composables, and utility bundles
Status: 16 added / 16 removed / 20 unchanged Vendor & Third-Party — 15.3 MB (baseline 15.3 MB) • ⚪ 0 BExternal libraries and shared vendor chunks Status: 16 unchanged Other — 11.9 MB (baseline 11.9 MB) • ⚪ 0 BBundles that do not match a named category
Status: 66 added / 66 removed / 97 unchanged ⚡ Performance Report
Show regressions
All metrics
Historical variance (last 15 runs)
Trend (last 15 commits on main)
Raw data{
"timestamp": "2026-07-14T17:15:52.218Z",
"gitSha": "5b931959a14a5af0ae0984f0d36990a658eb9855",
"branch": "codex/global-dialog-workspace-inset",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2039.1119999999887,
"styleRecalcs": 10,
"styleRecalcDurationMs": 9.947000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 417.1650000000001,
"heapDeltaBytes": -682064,
"heapUsedBytes": 61194596,
"domNodes": 20,
"jsHeapTotalBytes": 27525120,
"scriptDurationMs": 21.302000000000003,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "canvas-idle",
"durationMs": 2028.302999999994,
"styleRecalcs": 8,
"styleRecalcDurationMs": 8.045,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 434.30400000000003,
"heapDeltaBytes": -1090880,
"heapUsedBytes": 51090272,
"domNodes": -293,
"jsHeapTotalBytes": 16642048,
"scriptDurationMs": 19.616,
"eventListeners": -199,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-mouse-sweep",
"durationMs": 2029.5249999999783,
"styleRecalcs": 77,
"styleRecalcDurationMs": 46.393,
"layouts": 12,
"layoutDurationMs": 3.935,
"taskDurationMs": 956.8630000000002,
"heapDeltaBytes": -2762256,
"heapUsedBytes": 49383624,
"domNodes": -269,
"jsHeapTotalBytes": 18214912,
"scriptDurationMs": 136.20200000000003,
"eventListeners": -199,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1822.6799999999912,
"styleRecalcs": 74,
"styleRecalcDurationMs": 37.617,
"layouts": 12,
"layoutDurationMs": 3.403,
"taskDurationMs": 764.1020000000001,
"heapDeltaBytes": -5760420,
"heapUsedBytes": 54847432,
"domNodes": 57,
"jsHeapTotalBytes": 25690112,
"scriptDurationMs": 122.886,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333335,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1755.3030000000263,
"styleRecalcs": 31,
"styleRecalcDurationMs": 21.212,
"layouts": 6,
"layoutDurationMs": 0.6409999999999999,
"taskDurationMs": 395.323,
"heapDeltaBytes": -3746120,
"heapUsedBytes": 66389840,
"domNodes": -229,
"jsHeapTotalBytes": 13774848,
"scriptDurationMs": 21.119,
"eventListeners": -184,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1759.5669999999473,
"styleRecalcs": 32,
"styleRecalcDurationMs": 17.911000000000005,
"layouts": 6,
"layoutDurationMs": 0.7750000000000001,
"taskDurationMs": 354.12300000000005,
"heapDeltaBytes": 5015516,
"heapUsedBytes": 57232100,
"domNodes": -243,
"jsHeapTotalBytes": 2224128,
"scriptDurationMs": 20.056,
"eventListeners": -186,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "dom-widget-clipping",
"durationMs": 644.5739999999773,
"styleRecalcs": 12,
"styleRecalcDurationMs": 10.019,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 401.33000000000004,
"heapDeltaBytes": 11716900,
"heapUsedBytes": 74603112,
"domNodes": 20,
"jsHeapTotalBytes": 22282240,
"scriptDurationMs": 69.44500000000001,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "dom-widget-clipping",
"durationMs": 569.5729999999912,
"styleRecalcs": 11,
"styleRecalcDurationMs": 7.373000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 338.701,
"heapDeltaBytes": 7518804,
"heapUsedBytes": 66546316,
"domNodes": 18,
"jsHeapTotalBytes": 17301504,
"scriptDurationMs": 57.05499999999999,
"eventListeners": 0,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-idle",
"durationMs": 2019.5699999999874,
"styleRecalcs": 10,
"styleRecalcDurationMs": 10.222999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 525.609,
"heapDeltaBytes": -8297040,
"heapUsedBytes": 64101700,
"domNodes": 20,
"jsHeapTotalBytes": 9318400,
"scriptDurationMs": 98.248,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-idle",
"durationMs": 2052.8400000000033,
"styleRecalcs": 9,
"styleRecalcDurationMs": 9.306999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 650.182,
"heapDeltaBytes": -1931752,
"heapUsedBytes": 59427868,
"domNodes": -271,
"jsHeapTotalBytes": -1359872,
"scriptDurationMs": 114.30200000000002,
"eventListeners": -197,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-pan",
"durationMs": 2117.293000000018,
"styleRecalcs": 69,
"styleRecalcDurationMs": 19.316999999999997,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1156.487,
"heapDeltaBytes": 8724124,
"heapUsedBytes": 65899924,
"domNodes": 18,
"jsHeapTotalBytes": 9641984,
"scriptDurationMs": 464.71199999999993,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "large-graph-pan",
"durationMs": 2110.014000000092,
"styleRecalcs": 69,
"styleRecalcDurationMs": 16.754,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1116.422,
"heapDeltaBytes": -6882048,
"heapUsedBytes": 55873588,
"domNodes": -275,
"jsHeapTotalBytes": -573440,
"scriptDurationMs": 404.89799999999997,
"eventListeners": -197,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.699999999999818
},
{
"name": "large-graph-zoom",
"durationMs": 3130.559000000005,
"styleRecalcs": 62,
"styleRecalcDurationMs": 15.495000000000001,
"layouts": 60,
"layoutDurationMs": 7.127999999999999,
"taskDurationMs": 1275.56,
"heapDeltaBytes": 14246216,
"heapUsedBytes": 70506028,
"domNodes": 6,
"jsHeapTotalBytes": 2359296,
"scriptDurationMs": 490.10299999999995,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "large-graph-zoom",
"durationMs": 3118.247999999994,
"styleRecalcs": 65,
"styleRecalcDurationMs": 17.658,
"layouts": 60,
"layoutDurationMs": 7.325,
"taskDurationMs": 1284.691,
"heapDeltaBytes": 15814844,
"heapUsedBytes": 71702396,
"domNodes": 12,
"jsHeapTotalBytes": 7077888,
"scriptDurationMs": 483.841,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "minimap-idle",
"durationMs": 2038.0249999999478,
"styleRecalcs": 7,
"styleRecalcDurationMs": 7.232000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 570.779,
"heapDeltaBytes": -2842420,
"heapUsedBytes": 60749980,
"domNodes": -275,
"jsHeapTotalBytes": -1622016,
"scriptDurationMs": 104.88999999999999,
"eventListeners": -197,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "minimap-idle",
"durationMs": 2026.4539999999442,
"styleRecalcs": 7,
"styleRecalcDurationMs": 5.949999999999997,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 505.231,
"heapDeltaBytes": -16068180,
"heapUsedBytes": 60760228,
"domNodes": -272,
"jsHeapTotalBytes": 1904640,
"scriptDurationMs": 90.586,
"eventListeners": -197,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 607.1949999999902,
"styleRecalcs": 47,
"styleRecalcDurationMs": 12.855,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 421.7169999999999,
"heapDeltaBytes": -22120932,
"heapUsedBytes": 48029876,
"domNodes": -276,
"jsHeapTotalBytes": 6172672,
"scriptDurationMs": 130.254,
"eventListeners": -195,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 636.1449999999422,
"styleRecalcs": 47,
"styleRecalcDurationMs": 11.349,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 424.826,
"heapDeltaBytes": -21579600,
"heapUsedBytes": 48597052,
"domNodes": -275,
"jsHeapTotalBytes": 4861952,
"scriptDurationMs": 125.17900000000002,
"eventListeners": -197,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66666666666665,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-idle",
"durationMs": 2053.250000000048,
"styleRecalcs": 11,
"styleRecalcDurationMs": 9.990999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 423.74500000000006,
"heapDeltaBytes": -7455352,
"heapUsedBytes": 62822096,
"domNodes": -273,
"jsHeapTotalBytes": 18493440,
"scriptDurationMs": 16.494,
"eventListeners": -199,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-idle",
"durationMs": 2023.3299999999872,
"styleRecalcs": 9,
"styleRecalcDurationMs": 8.616999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 398.17800000000005,
"heapDeltaBytes": -2686676,
"heapUsedBytes": 49390908,
"domNodes": -291,
"jsHeapTotalBytes": 17166336,
"scriptDurationMs": 14.217,
"eventListeners": -199,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1728.7399999999593,
"styleRecalcs": 76,
"styleRecalcDurationMs": 40.63999999999999,
"layouts": 16,
"layoutDurationMs": 4.720000000000001,
"taskDurationMs": 751.598,
"heapDeltaBytes": 16509000,
"heapUsedBytes": 69093528,
"domNodes": -276,
"jsHeapTotalBytes": 13758464,
"scriptDurationMs": 98.98499999999999,
"eventListeners": -199,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66333333333332,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1761.9260000000168,
"styleRecalcs": 76,
"styleRecalcDurationMs": 37.117,
"layouts": 16,
"layoutDurationMs": 4.323,
"taskDurationMs": 718.29,
"heapDeltaBytes": 19249180,
"heapUsedBytes": 71817576,
"domNodes": -246,
"jsHeapTotalBytes": 16904192,
"scriptDurationMs": 92.24000000000001,
"eventListeners": -199,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "subgraph-transition-enter",
"durationMs": 1065.796999999975,
"styleRecalcs": 18,
"styleRecalcDurationMs": 32.861,
"layouts": 14,
"layoutDurationMs": 16.240000000000002,
"taskDurationMs": 823.3750000000002,
"heapDeltaBytes": 29681200,
"heapUsedBytes": 101979720,
"domNodes": 13673,
"jsHeapTotalBytes": 16252928,
"scriptDurationMs": 30.589000000000006,
"eventListeners": 2533,
"totalBlockingTimeMs": 166,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.800000000000182
},
{
"name": "viewport-pan-sweep",
"durationMs": 8233.381000000008,
"styleRecalcs": 251,
"styleRecalcDurationMs": 59.828,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 3778.2729999999997,
"heapDeltaBytes": 6466008,
"heapUsedBytes": 74705872,
"domNodes": -270,
"jsHeapTotalBytes": 450560,
"scriptDurationMs": 1261.7430000000002,
"eventListeners": -183,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000012,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "viewport-pan-sweep",
"durationMs": 8170.003999999949,
"styleRecalcs": 250,
"styleRecalcDurationMs": 53.06,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 4004.9019999999996,
"heapDeltaBytes": 4905580,
"heapUsedBytes": 73498176,
"domNodes": -273,
"jsHeapTotalBytes": 4644864,
"scriptDurationMs": 1379.3880000000001,
"eventListeners": -183,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.700000000000728
},
{
"name": "vue-large-graph-idle",
"durationMs": 12462.57300000002,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12449.550000000003,
"heapDeltaBytes": -47272720,
"heapUsedBytes": 167734848,
"domNodes": -3300,
"jsHeapTotalBytes": 4689920,
"scriptDurationMs": 580.935,
"eventListeners": -16378,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.219999999999953,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-idle",
"durationMs": 12612.02400000002,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12596.985,
"heapDeltaBytes": -31425836,
"heapUsedBytes": 170167204,
"domNodes": -3302,
"jsHeapTotalBytes": 20156416,
"scriptDurationMs": 509.68800000000005,
"eventListeners": -16378,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.223333333333237,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 15081.477000000006,
"styleRecalcs": 73,
"styleRecalcDurationMs": 17.915000000000013,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 15054.167,
"heapDeltaBytes": -25850312,
"heapUsedBytes": 180312116,
"domNodes": -3300,
"jsHeapTotalBytes": -4308992,
"scriptDurationMs": 827.062,
"eventListeners": -16380,
"totalBlockingTimeMs": 0,
"frameDurationMs": 17.220000000000073,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "vue-large-graph-pan",
"durationMs": 15138.005000000021,
"styleRecalcs": 70,
"styleRecalcDurationMs": 17.730000000000025,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 15114.134999999998,
"heapDeltaBytes": -39669080,
"heapUsedBytes": 176719156,
"domNodes": -3301,
"jsHeapTotalBytes": 6991872,
"scriptDurationMs": 820.6039999999999,
"eventListeners": -16374,
"totalBlockingTimeMs": 9,
"frameDurationMs": 17.223333333333237,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "workflow-execution",
"durationMs": 477.4630000000002,
"styleRecalcs": 12,
"styleRecalcDurationMs": 17.753999999999998,
"layouts": 2,
"layoutDurationMs": 0.4270000000000001,
"taskDurationMs": 99.932,
"heapDeltaBytes": 4908392,
"heapUsedBytes": 57169060,
"domNodes": 128,
"jsHeapTotalBytes": 262144,
"scriptDurationMs": 10.13,
"eventListeners": 65,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66666666666665,
"p95FrameDurationMs": 16.799999999999272
},
{
"name": "workflow-execution",
"durationMs": 461.90500000000156,
"styleRecalcs": 12,
"styleRecalcDurationMs": 22.407000000000004,
"layouts": 3,
"layoutDurationMs": 0.678,
"taskDurationMs": 158.35200000000003,
"heapDeltaBytes": -6450576,
"heapUsedBytes": 45722008,
"domNodes": -264,
"jsHeapTotalBytes": -397312,
"scriptDurationMs": 10.295,
"eventListeners": -173,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.666666666666668,
"p95FrameDurationMs": 16.799999999999272
}
]
} |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/assets/css/style.css`:
- Around line 3-6: Update the :root custom property --workspace-inset-right from
the unitless value 0 to the length value 0px so it remains valid when used in
calc() expressions with other length values.
In `@src/components/dialog/GlobalDialog.test.ts`:
- Around line 104-132: Remove the change-detector CSS class assertions from
src/components/dialog/GlobalDialog.test.ts lines 104-132 by deleting the entire
“centers full Reka dialogs inside the visible workspace” test. In
src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts lines
142-144, remove the contentClass string assertion and, if coverage is needed,
assert the semantic size: 'full' property instead.
🪄 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: 8509c119-9488-4ebc-bb2d-5f78be60acbc
📒 Files selected for processing (5)
src/assets/css/style.csssrc/components/dialog/GlobalDialog.test.tssrc/components/ui/dialog/dialog.variants.tssrc/platform/cloud/subscription/composables/useSubscriptionDialog.test.tssrc/platform/cloud/subscription/composables/useSubscriptionDialog.ts
Comment on lines
+3
to
+6
| :root { | ||
| --workspace-inset-right: 0; | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Change 0 to 0px to prevent invalid CSS calc() expressions.
Unitless 0 is invalid when used in CSS calc() additions or subtractions alongside <length> values. When --workspace-inset-right is 0, expressions like calc(100vw - var(--workspace-inset-right) - 1rem) evaluate to calc(100vw - 0 - 1rem). The browser parses 0 as a <number>, not a <length>, causing a type mismatch that makes the entire calc() expression invalid. This drops the CSS rule and breaks the dialog's sizing constraints.
Use 0px to ensure the variable works correctly in layout calculations.
🐛 Proposed fix
:root {
- --workspace-inset-right: 0;
+ --workspace-inset-right: 0px;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| :root { | |
| --workspace-inset-right: 0; | |
| } | |
| :root { | |
| --workspace-inset-right: 0px; | |
| } |
🤖 Prompt for 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.
In `@src/assets/css/style.css` around lines 3 - 6, Update the :root custom
property --workspace-inset-right from the unitless value 0 to the length value
0px so it remains valid when used in calc() expressions with other length
values.
Comment on lines
+104
to
+132
| it('centers full Reka dialogs inside the visible workspace', async () => { | ||
| mountDialog() | ||
| const store = useDialogStore() | ||
|
|
||
| store.showDialog({ | ||
| key: 'visible-workspace', | ||
| title: 'Visible workspace dialog', | ||
| component: Body, | ||
| dialogComponentProps: { renderer: 'reka', size: 'full' } | ||
| }) | ||
|
|
||
| const dialog = await screen.findByRole('dialog') | ||
| expect( | ||
| dialog.classList.contains( | ||
| 'left-[calc(50%-var(--workspace-inset-right)/2)]' | ||
| ) | ||
| ).toBe(true) | ||
| expect( | ||
| dialog.classList.contains( | ||
| 'w-[calc(100vw-var(--workspace-inset-right)-1rem)]' | ||
| ) | ||
| ).toBe(true) | ||
| expect( | ||
| dialog.classList.contains( | ||
| 'sm:max-w-[calc(100vw-var(--workspace-inset-right)-1rem)]' | ||
| ) | ||
| ).toBe(true) | ||
| }) | ||
|
|
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Remove change-detector class assertions.
Both test files assert specific Tailwind class strings for dynamic layout and sizing. This violates the repository's testing instructions which expressly forbid change-detector style assertions and discourage styles/classes as assertion targets. Since the PR summary states that browser geometry validation is already included for these layouts, these Vitest class-string assertions are redundant and fragile.
As per path instructions, do not write change-detector tests, and avoid tests dependent on non-behavioral features like specific Tailwind/CSS class strings.
src/components/dialog/GlobalDialog.test.ts#L104-L132: Remove this test entirely, as it only verifies implementation-detail CSS classes that Vitest/jsdom cannot accurately measure anyway.src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts#L142-L144: Remove thiscontentClassstring assertion. If necessary, assert the semanticsize: 'full'property instead.
📍 Affects 2 files
src/components/dialog/GlobalDialog.test.ts#L104-L132(this comment)src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts#L142-L144
🤖 Prompt for 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.
In `@src/components/dialog/GlobalDialog.test.ts` around lines 104 - 132, Remove
the change-detector CSS class assertions from
src/components/dialog/GlobalDialog.test.ts lines 104-132 by deleting the entire
“centers full Reka dialogs inside the visible workspace” test. In
src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts lines
142-144, remove the contentClass string assertion and, if coverage is needed,
assert the semantic size: 'full' property instead.
Source: Path instructions
Codecov Report✅ All modified and coverable lines are covered by tests. @@ Coverage Diff @@
## main #13633 +/- ##
==========================================
- Coverage 78.68% 78.05% -0.64%
==========================================
Files 1667 1669 +2
Lines 114346 109960 -4386
Branches 40551 39091 -1460
==========================================
- Hits 89978 85830 -4148
+ Misses 23451 23244 -207
+ Partials 917 886 -31
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 81 files with indirect coverage changes 🚀 New features to boost your workflow:
|
This reverts commit 6d5a911.
dosubot
Bot
added
size:XS
dosubot
Bot
added
size:S
Contributor
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
`@src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts`:
- Around line 135-137: Remove the exact Tailwind class assertion from
SubscriptionRequiredDialogContentWorkspace.test.ts and remove the data-testid
used only by that assertion from SubscriptionRequiredDialogContentWorkspace.vue;
no other behavioral tests need changes.
🪄 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: c821388b-a54e-4017-9bca-940dab717451
📒 Files selected for processing (4)
src/platform/cloud/subscription/composables/useSubscriptionDialog.test.tssrc/platform/cloud/subscription/composables/useSubscriptionDialog.tssrc/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.tssrc/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
Comment on lines
+135
to
+137
| expect( | ||
| screen.getByTestId('subscription-workspace-dialog-content') | ||
| ).toHaveClass('xl:w-[min(1280px,95vw)]') |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Remove the fragile styling assertion and its associated data-testid.
Testing for an exact Tailwind class (xl:w-[min(1280px,95vw)]) is an over-specific DOM check. The data-testid added solely to support this assertion should also be removed.
As per path instructions, avoid tests dependent on non-behavioral features like styles/classes, and flag fragile assertions (over-specific DOM details that change for styling reasons).
src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts#L135-L137: Delete thetoHaveClassassertion.src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue#L3-L3: Delete thedata-testid="subscription-workspace-dialog-content"attribute.
📍 Affects 2 files
src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts#L135-L137(this comment)src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue#L3-L3
🤖 Prompt for 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.
In
`@src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts`
around lines 135 - 137, Remove the exact Tailwind class assertion from
SubscriptionRequiredDialogContentWorkspace.test.ts and remove the data-testid
used only by that assertion from SubscriptionRequiredDialogContentWorkspace.vue;
no other behavioral tests need changes.
Source: Path instructions
dosubot
Bot
added
size:M
CodeJuggernaut
changed the title
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts`:
- Around line 82-94: Replace expectPricingDialogFrame’s internal prop assertions
with behavioral tests that verify the rendered pricing dialog frame and its
resulting geometry. Add coverage for both workspace inset and no-inset sizing
outcomes, asserting the effective dimensions rather than implementation details
such as renderer, contentClass, style, or pt.
In `@src/platform/cloud/subscription/composables/useSubscriptionDialog.ts`:
- Around line 15-16: Update PRICING_DIALOG_CONTENT_CLASS to remove the redundant
sm:max-w class and revise the max-width constraint so it subtracts
var(--workspace-inset-right) from the viewport-based limit, while preserving the
1280px cap and existing dialog styling.
🪄 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: 22f45653-6ebe-4f98-88ca-fb00cceb9df3
📒 Files selected for processing (2)
src/platform/cloud/subscription/composables/useSubscriptionDialog.test.tssrc/platform/cloud/subscription/composables/useSubscriptionDialog.ts
Comment on lines
+82
to
+94
| function expectPricingDialogFrame( | ||
| dialogComponentProps: Record<string, unknown> | ||
| ) { | ||
| expect(dialogComponentProps).toMatchObject({ | ||
| renderer: 'reka', | ||
| size: 'full' | ||
| }) | ||
| expect(dialogComponentProps.contentClass).toContain( | ||
| 'max-w-[min(1280px,95vw)]' | ||
| ) | ||
| expect(dialogComponentProps).not.toHaveProperty('style') | ||
| expect(dialogComponentProps).not.toHaveProperty('pt') | ||
| } |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Replace change-detector assertions with behavioral geometry tests.
This test helper acts as a change-detector by solely verifying the internal component props passed to the layout service (e.g., sniffing renderer and contentClass strings) rather than asserting the actual rendering outcome. As per path instructions for Vitest files, you should prefer behavioral verification (e.g., dialog frame and geometry outcome) and ensure proper test coverage exists for the new workspace inset sizing behavior (inset vs. no-inset), which is currently missing.
🤖 Prompt for 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.
In `@src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts`
around lines 82 - 94, Replace expectPricingDialogFrame’s internal prop
assertions with behavioral tests that verify the rendered pricing dialog frame
and its resulting geometry. Add coverage for both workspace inset and no-inset
sizing outcomes, asserting the effective dimensions rather than implementation
details such as renderer, contentClass, style, or pt.
Source: Path instructions
Comment on lines
+15
to
+16
| const PRICING_DIALOG_CONTENT_CLASS = | ||
| 'w-fit max-w-[min(1280px,95vw)] sm:max-w-[min(1280px,95vw)] max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]' |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Incorporate --workspace-inset-right and remove the redundant responsive class.
The PR objectives mention constraining unified pricing dialogs to the visible workspace when a right inset is configured. However, the hardcoded 95vw does not account for the inset, which can cause the dialog to overflow the visible area when the inset is active. Consider adjusting the width constraint to incorporate the inset (e.g., calc(95vw - var(--workspace-inset-right)) or similar).
Additionally, the sm:max-w-[min(1280px,95vw)] class is redundant because it is identical to the base max-w-[min(1280px,95vw)] class.
💡 Proposed fix
-const PRICING_DIALOG_CONTENT_CLASS =
- 'w-fit max-w-[min(1280px,95vw)] sm:max-w-[min(1280px,95vw)] max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]'
+const PRICING_DIALOG_CONTENT_CLASS =
+ 'w-fit max-w-[min(1280px,calc(95vw-var(--workspace-inset-right)))] max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]'🤖 Prompt for 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.
In `@src/platform/cloud/subscription/composables/useSubscriptionDialog.ts` around
lines 15 - 16, Update PRICING_DIALOG_CONTENT_CLASS to remove the redundant
sm:max-w class and revise the max-width constraint so it subtracts
var(--workspace-inset-right) from the viewport-based limit, while preserving the
1280px cap and existing dialog styling.
Contributor
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 `@src/platform/cloud/subscription/composables/useSubscriptionDialog.ts`:
- Around line 148-150: Update the dialog’s contentClass max-width constraint to
account for --workspace-inset-right, using the existing min/max sizing behavior
with a calculated viewport width, and remove the redundant
sm:max-w-[min(1280px,95vw)] responsive class while preserving the other styling.
🪄 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: 4373cf2a-c359-4da2-a3ca-e10688076949
📒 Files selected for processing (2)
src/platform/cloud/subscription/composables/useSubscriptionDialog.test.tssrc/platform/cloud/subscription/composables/useSubscriptionDialog.ts
Contributor
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
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 `@src/platform/cloud/subscription/composables/useSubscriptionDialog.ts`:
- Around line 148-150: Update the dialog’s contentClass max-width constraint to
account for --workspace-inset-right, using the existing min/max sizing behavior
with a calculated viewport width, and remove the redundant
sm:max-w-[min(1280px,95vw)] responsive class while preserving the other styling.
🪄 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: 4373cf2a-c359-4da2-a3ca-e10688076949
📒 Files selected for processing (2)
src/platform/cloud/subscription/composables/useSubscriptionDialog.test.tssrc/platform/cloud/subscription/composables/useSubscriptionDialog.ts
🛑 Comments failed to post (1)
src/platform/cloud/subscription/composables/useSubscriptionDialog.ts (1)
148-150: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Incorporate
--workspace-inset-rightand remove the redundant responsive class.The hardcoded
95vwdoes not account for the workspace inset, which can cause the dialog to overflow the visible area when the right inset is active. Consider adjusting the width constraint to incorporate the inset (e.g.,calc(95vw - var(--workspace-inset-right))or similar).Additionally, the
sm:max-w-[min(1280px,95vw)]class is redundant because it is identical to the basemax-w-[min(1280px,95vw)]class.💡 Proposed fix
- contentClass: - 'w-fit max-w-[min(1280px,95vw)] sm:max-w-[min(1280px,95vw)] max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]' + contentClass: + 'w-fit max-w-[min(1280px,calc(95vw-var(--workspace-inset-right)))] max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]'🤖 Prompt for 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. In `@src/platform/cloud/subscription/composables/useSubscriptionDialog.ts` around lines 148 - 150, Update the dialog’s contentClass max-width constraint to account for --workspace-inset-right, using the existing min/max sizing behavior with a calculated viewport width, and remove the redundant sm:max-w-[min(1280px,95vw)] responsive class while preserving the other styling.
dante01yoon
reviewed
Jul 14, 2026
dante01yoon
left a comment
dante01yoon
left a comment
Collaborator
There was a problem hiding this comment.
Regression sweep of the diff (5 angles, each candidate adversarially verified). No functional regression introduced: the legacy paths' old style/pt were already ignored by the Reka renderer on main, so these dialogs rendered at the collapsed md (576px) frame — the new contentClass is a net fix. One non-blocking sizing-consistency suggestion below. Out of scope but worth noting: the fully-legacy bottom path still renders modal: true over PricingTable.vue's body-teleported help Popover, so that popover stays pointer-dead — but that's pre-existing on main (this PR doesn't change modal-ness), tracked under #13558; not for this PR. (Skipping CodeRabbit's change-detector-assertion notes.)
| renderer: 'reka', | ||
| size: 'full', | ||
| contentClass: | ||
| 'sm:max-w-7xl max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]' |
Collaborator
There was a problem hiding this comment.
suggestion: match the unified path's sizing idiom instead of sm:max-w-7xl. The full variant's base is w-[calc(100vw-1rem)] with only sm:max-w-[calc(100vw-1rem)], and via cn/tailwind-merge this contentClass wins — so max-w-7xl (a hard 1280px) only binds above a ~1296px viewport. Across 640–1296px (every common laptop width) the legacy pricing dialog renders ~100vw-1rem, i.e. ~8px side margins, near-full-bleed with a clipped shadow; below 640px there's no cap at all. The sibling unified dialog opened by this same composable uses w-fit max-w-[min(1280px,95vw)] sm:max-w-[min(1280px,95vw)] (~32px margins, plus a sub-640px cap). Using the same idiom here fixes the full-bleed look and keeps one sizing form across the subscription family. It also keeps this width easy to make inset-aware later: the --workspace-inset-right contract (prototyped then reverted on this branch, still the open ask on #13472/#13558) retrofits a min(..., calc(100vw-var(--workspace-inset-right)-1rem)) cap onto the min(1280px,95vw) idiom, but not onto a Tailwind-named 7xl.
dante01yoon
approved these changes
Jul 14, 2026
DrJKL
added
needs-backport
DrJKL
enabled auto-merge
July 15, 2026 00:34
Member
|
@CodeJuggernaut Successfully backported to #13666 |
github-actions
Bot
removed
the
needs-backport
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the legacy personal and legacy workspace pricing dialogs so Reka owns the dialog width and the pricing table no longer overflows the default 576px frame.
Changes
styleandptdialog props with Rekarenderer,size, andcontentClassprops for both legacy pricing paths.modal: falsefor the legacy workspace path so its teleported PrimeVue plan-details popover remains interactive.Review Focus
styleandptprops for these pricing dialogs. Reka ignored those props and fell back tosize="md"(max-w-xl, 576px). #13092 fixed the unified pricing path only and explicitly left the two legacy paths for follow-up.size: 'full'andsm:max-w-7xl. Pricing content no longer has to compensate for a narrow shell.modal: falseremains intentional because the legacy table opens a PrimeVue popover teleported tobody.pnpm typecheckpasses, and targeted ESLint passes. Chrome validation at 1352x705 rendered a 1280px dialog with no horizontal overflow in both the isolated PR preview and the combined agent-panel preview. The docked agent panel remained mounted behind the modal.Screenshots (if applicable)