fix: make graph canvas toolbar visible on mobile#10168
Open
christian-byrne wants to merge 3 commits intomainfrom
Open
fix: make graph canvas toolbar visible on mobile#10168christian-byrne wants to merge 3 commits intomainfrom
christian-byrne wants to merge 3 commits intomainfrom
Conversation
Override PrimeVue's default overflow:hidden on the graph-canvas-panel SplitterPanel with overflow-visible. The panel contains absolutely- positioned children (GraphCanvasMenu at bottom-0 right-0, MiniMap at bottom-[54px]) that get clipped on mobile viewports when the panel's bounding box is smaller than the full canvas area. Add regression test to ensure overflow-visible stays on graph-canvas-panel. Fixes: COM-16822
christian-byrne
added
the
preview-cpu
dosubot
bot
added
the
size:M
🎨 Storybook: ✅ Built — View Storybook |
🎭 Playwright: ✅ 625 passed, 0 failed · 5 flaky📊 Browser Reports
|
Contributor
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdded an overflow-visible class to the graph-canvas SplitterPanel to prevent PrimeVue's overflow:hidden from clipping absolutely-positioned toolbar elements, plus regression and browser tests asserting toolbar visibility on mobile. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
![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: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/LiteGraphCanvasSplitterOverlay.test.ts`:
- Around line 17-26: Current test inspects the SFC source with a regex; replace
it with a behavioral test that mounts/renders LiteGraphCanvasSplitterOverlay.vue
(the component under test) in a mobile-sized viewport and asserts the
GraphCanvasMenu (or the element with class graph-canvas-panel / toolbar element)
is visible and reachable (e.g., check element is in the DOM and its
getBoundingClientRect sits within the viewport or that it is not
clipped/hidden). Use the project's preferred test tooling (e.g., `@vue/test-utils`
mount or a browser test runner) to set a small viewport size, interact if needed
to reveal the bottom-right controls, and assert visibility/position rather than
asserting CSS class strings.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4261530c-9cc0-4f9e-a1e5-67a00e92f1c6
📒 Files selected for processing (2)
src/components/LiteGraphCanvasSplitterOverlay.test.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
Comment on lines
+17
to
+26
| it('graph-canvas-panel has overflow-visible to prevent clipping toolbar on mobile', () => { | ||
| const filePath = resolve(__dirname, 'LiteGraphCanvasSplitterOverlay.vue') | ||
| const source = readFileSync(filePath, 'utf-8') | ||
|
|
||
| // The SplitterPanel wrapping graph-canvas-panel must include overflow-visible | ||
| // to override PrimeVue's default overflow:hidden on .p-splitterpanel. | ||
| // Without this, GraphCanvasMenu (absolute right-0 bottom-0) gets clipped on mobile. | ||
| expect(source).toMatch( | ||
| /class="[^"]*graph-canvas-panel[^"]*overflow-visible/ | ||
| ) |
Contributor
There was a problem hiding this comment.
Replace source-regex assertion with a behavioral test.
This test validates raw SFC text (Line 24) and utility class names, so it’s brittle (ordering/formatting-sensitive) and does not verify runtime behavior. Please switch to a behavioral component/browser test (e.g., mobile viewport interaction that confirms the bottom-right graph controls remain reachable/visible).
As per coding guidelines: src/**/*.test.ts says to “write behavioral tests” and “do not write tests dependent on non-behavioral features like utility classes or styles.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/LiteGraphCanvasSplitterOverlay.test.ts` around lines 17 - 26,
Current test inspects the SFC source with a regex; replace it with a behavioral
test that mounts/renders LiteGraphCanvasSplitterOverlay.vue (the component under
test) in a mobile-sized viewport and asserts the GraphCanvasMenu (or the element
with class graph-canvas-panel / toolbar element) is visible and reachable (e.g.,
check element is in the DOM and its getBoundingClientRect sits within the
viewport or that it is not clipped/hidden). Use the project's preferred test
tooling (e.g., `@vue/test-utils` mount or a browser test runner) to set a small
viewport size, interact if needed to reveal the bottom-right controls, and
assert visibility/position rather than asserting CSS class strings.
Contributor
Author
|
I'm not sure why the mobile baseline e2e test didn't catch this bug initially, going to add a new one now though. Edit: done |
📦 Bundle: 5 MB gzip 🟢 -3 BDetailsSummary
Category Glance App Entry Points — 22.7 kB (baseline 22.7 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.1 MB (baseline 1.1 MB) • 🔴 +17 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 75.9 kB (baseline 75.9 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed / 2 unchanged Panels & Settings — 461 kB (baseline 461 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 10 added / 10 removed / 12 unchanged User & Accounts — 16.9 kB (baseline 16.9 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 5 added / 5 removed / 2 unchanged Editors & Dialogs — 82 kB (baseline 82 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 59.3 kB (baseline 59.3 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed / 8 unchanged Data & Services — 2.91 MB (baseline 2.91 MB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 14 added / 14 removed / 3 unchanged Utilities & Hooks — 318 kB (baseline 318 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 14 added / 14 removed / 8 unchanged Vendor & Third-Party — 9.78 MB (baseline 9.78 MB) • ⚪ 0 BExternal libraries and shared vendor chunks Status: 16 unchanged Other — 8.24 MB (baseline 8.24 MB) • ⚪ 0 BBundles that do not match a named category
Status: 53 added / 53 removed / 79 unchanged ⚡ Performance Report
Raw data{
"timestamp": "2026-03-17T13:24:02.064Z",
"gitSha": "2e70aa94cf07d65136dfcdbd158bbbf28b4f9da4",
"branch": "fix/mobile-canvas-toolbar-visibility",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2024.9039999999923,
"styleRecalcs": 6,
"styleRecalcDurationMs": 5.3950000000000005,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 395.948,
"heapDeltaBytes": 2073212,
"domNodes": 12,
"jsHeapTotalBytes": 16515072,
"scriptDurationMs": 20.080000000000002,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "canvas-idle",
"durationMs": 2024.5740000000296,
"styleRecalcs": 11,
"styleRecalcDurationMs": 9.623000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 363.802,
"heapDeltaBytes": 1595336,
"domNodes": 22,
"jsHeapTotalBytes": 17039360,
"scriptDurationMs": 23.767000000000003,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "canvas-idle",
"durationMs": 2029.1369999999915,
"styleRecalcs": 12,
"styleRecalcDurationMs": 10.979000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 366.265,
"heapDeltaBytes": -4228184,
"domNodes": 24,
"jsHeapTotalBytes": 24903680,
"scriptDurationMs": 23.555,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1790.9220000000232,
"styleRecalcs": 76,
"styleRecalcDurationMs": 36.269999999999996,
"layouts": 12,
"layoutDurationMs": 3.1420000000000003,
"taskDurationMs": 749.775,
"heapDeltaBytes": -2616220,
"domNodes": 59,
"jsHeapTotalBytes": 17563648,
"scriptDurationMs": 134.23399999999998,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.660000000000036
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1995.7760000000917,
"styleRecalcs": 80,
"styleRecalcDurationMs": 43.387,
"layouts": 12,
"layoutDurationMs": 3.417,
"taskDurationMs": 947.923,
"heapDeltaBytes": 21439432,
"domNodes": 65,
"jsHeapTotalBytes": 15990784,
"scriptDurationMs": 134.06699999999998,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "canvas-mouse-sweep",
"durationMs": 1807.3729999999841,
"styleRecalcs": 73,
"styleRecalcDurationMs": 35.965,
"layouts": 12,
"layoutDurationMs": 3.184,
"taskDurationMs": 750.693,
"heapDeltaBytes": -2048356,
"domNodes": 56,
"jsHeapTotalBytes": 18874368,
"scriptDurationMs": 129.788,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1742.9169999999203,
"styleRecalcs": 33,
"styleRecalcDurationMs": 16.792,
"layouts": 6,
"layoutDurationMs": 0.5810000000000002,
"taskDurationMs": 309.96999999999997,
"heapDeltaBytes": 6190304,
"domNodes": 79,
"jsHeapTotalBytes": 17301504,
"scriptDurationMs": 24.334999999999997,
"eventListeners": 19,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1724.3199999999206,
"styleRecalcs": 31,
"styleRecalcDurationMs": 17.675,
"layouts": 6,
"layoutDurationMs": 0.5970000000000001,
"taskDurationMs": 297.52,
"heapDeltaBytes": 6030948,
"domNodes": 79,
"jsHeapTotalBytes": 18874368,
"scriptDurationMs": 24.276000000000007,
"eventListeners": 21,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "canvas-zoom-sweep",
"durationMs": 1749.0699999999606,
"styleRecalcs": 33,
"styleRecalcDurationMs": 21.566000000000003,
"layouts": 6,
"layoutDurationMs": 0.549,
"taskDurationMs": 313.51199999999994,
"heapDeltaBytes": 6037868,
"domNodes": 83,
"jsHeapTotalBytes": 17301504,
"scriptDurationMs": 24.883000000000003,
"eventListeners": 45,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "dom-widget-clipping",
"durationMs": 595.7400000000348,
"styleRecalcs": 14,
"styleRecalcDurationMs": 11.033999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 365.295,
"heapDeltaBytes": 11711252,
"domNodes": 25,
"jsHeapTotalBytes": 15466496,
"scriptDurationMs": 68.82,
"eventListeners": 26,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "dom-widget-clipping",
"durationMs": 572.1740000000182,
"styleRecalcs": 13,
"styleRecalcDurationMs": 10.757000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 352.25800000000004,
"heapDeltaBytes": 13327304,
"domNodes": 24,
"jsHeapTotalBytes": 15728640,
"scriptDurationMs": 65.70500000000001,
"eventListeners": 26,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.65999999999999
},
{
"name": "dom-widget-clipping",
"durationMs": 563.1930000000693,
"styleRecalcs": 13,
"styleRecalcDurationMs": 8.548999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 341.02900000000005,
"heapDeltaBytes": 14280948,
"domNodes": 21,
"jsHeapTotalBytes": 13107200,
"scriptDurationMs": 64.203,
"eventListeners": 2,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "large-graph-idle",
"durationMs": 2017.8430000000276,
"styleRecalcs": 12,
"styleRecalcDurationMs": 11.488000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 504.9600000000001,
"heapDeltaBytes": -9981800,
"domNodes": 27,
"jsHeapTotalBytes": 8507392,
"scriptDurationMs": 95.781,
"eventListeners": 28,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "large-graph-idle",
"durationMs": 2009.761000000026,
"styleRecalcs": 12,
"styleRecalcDurationMs": 13.211999999999998,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 490.57700000000006,
"heapDeltaBytes": -10944020,
"domNodes": 25,
"jsHeapTotalBytes": 7983104,
"scriptDurationMs": 91.692,
"eventListeners": 30,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "large-graph-idle",
"durationMs": 2031.4049999999497,
"styleRecalcs": 13,
"styleRecalcDurationMs": 13.495,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 507.58900000000006,
"heapDeltaBytes": -10083104,
"domNodes": 27,
"jsHeapTotalBytes": 8245248,
"scriptDurationMs": 95.888,
"eventListeners": 30,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "large-graph-pan",
"durationMs": 2083.9789999999994,
"styleRecalcs": 67,
"styleRecalcDurationMs": 13.863999999999997,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1102.27,
"heapDeltaBytes": 3678956,
"domNodes": 12,
"jsHeapTotalBytes": 11354112,
"scriptDurationMs": 436.947,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.660000000000036
},
{
"name": "large-graph-pan",
"durationMs": 2071.023000000082,
"styleRecalcs": 70,
"styleRecalcDurationMs": 17.554000000000002,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1010.5500000000001,
"heapDeltaBytes": 1616316,
"domNodes": 20,
"jsHeapTotalBytes": 9760768,
"scriptDurationMs": 376.76099999999997,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.67999999999993
},
{
"name": "large-graph-pan",
"durationMs": 2101.276999999982,
"styleRecalcs": 69,
"styleRecalcDurationMs": 16.503,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 1037.6370000000002,
"heapDeltaBytes": 675440,
"domNodes": 18,
"jsHeapTotalBytes": 9756672,
"scriptDurationMs": 380.483,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.660000000000036
},
{
"name": "minimap-idle",
"durationMs": 2018.453999999906,
"styleRecalcs": 10,
"styleRecalcDurationMs": 9.924000000000003,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 512.965,
"heapDeltaBytes": -10445404,
"domNodes": 20,
"jsHeapTotalBytes": 8507392,
"scriptDurationMs": 101.062,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "minimap-idle",
"durationMs": 2006.364000000076,
"styleRecalcs": 10,
"styleRecalcDurationMs": 9.685999999999996,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 484.87699999999995,
"heapDeltaBytes": -10577252,
"domNodes": 20,
"jsHeapTotalBytes": 6934528,
"scriptDurationMs": 96.054,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "minimap-idle",
"durationMs": 2019.578000000024,
"styleRecalcs": 9,
"styleRecalcDurationMs": 8.569,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 486.25,
"heapDeltaBytes": -12055356,
"domNodes": 18,
"jsHeapTotalBytes": 8507392,
"scriptDurationMs": 87.17899999999999,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 606.1730000000125,
"styleRecalcs": 47,
"styleRecalcDurationMs": 12.655999999999999,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 386.467,
"heapDeltaBytes": 13419312,
"domNodes": 20,
"jsHeapTotalBytes": 14155776,
"scriptDurationMs": 134.382,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000027
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 592.8170000000819,
"styleRecalcs": 48,
"styleRecalcDurationMs": 15.395,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 365.931,
"heapDeltaBytes": 12566728,
"domNodes": 22,
"jsHeapTotalBytes": 15728640,
"scriptDurationMs": 119.93400000000001,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000027
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 594.8059999999487,
"styleRecalcs": 48,
"styleRecalcDurationMs": 12.120000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 370.653,
"heapDeltaBytes": 13037648,
"domNodes": 22,
"jsHeapTotalBytes": 14680064,
"scriptDurationMs": 128.296,
"eventListeners": 8,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.65999999999999
},
{
"name": "subgraph-idle",
"durationMs": 2012.239999999963,
"styleRecalcs": 12,
"styleRecalcDurationMs": 16.18,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 377.4440000000001,
"heapDeltaBytes": 2705852,
"domNodes": 26,
"jsHeapTotalBytes": 14417920,
"scriptDurationMs": 19.514999999999997,
"eventListeners": 28,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "subgraph-idle",
"durationMs": 2005.1449999999704,
"styleRecalcs": 12,
"styleRecalcDurationMs": 11.44,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 343.449,
"heapDeltaBytes": 1189224,
"domNodes": 23,
"jsHeapTotalBytes": 14680064,
"scriptDurationMs": 17.555999999999997,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "subgraph-idle",
"durationMs": 1999.4709999999714,
"styleRecalcs": 10,
"styleRecalcDurationMs": 9.805000000000001,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 338.65299999999996,
"heapDeltaBytes": 1213860,
"domNodes": 20,
"jsHeapTotalBytes": 17039360,
"scriptDurationMs": 17.958999999999996,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.659999999999947
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1904.7299999999723,
"styleRecalcs": 86,
"styleRecalcDurationMs": 45.596000000000004,
"layouts": 16,
"layoutDurationMs": 8.517,
"taskDurationMs": 863.3740000000001,
"heapDeltaBytes": -7150988,
"domNodes": 75,
"jsHeapTotalBytes": 17563648,
"scriptDurationMs": 105.044,
"eventListeners": 6,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.66999999999998
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1684.757999999988,
"styleRecalcs": 75,
"styleRecalcDurationMs": 34.804,
"layouts": 16,
"layoutDurationMs": 4.26,
"taskDurationMs": 654.5029999999999,
"heapDeltaBytes": 13884080,
"domNodes": 61,
"jsHeapTotalBytes": 24903680,
"scriptDurationMs": 94.09899999999999,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000073
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 1726.0800000000245,
"styleRecalcs": 77,
"styleRecalcDurationMs": 39.994,
"layouts": 16,
"layoutDurationMs": 4.356,
"taskDurationMs": 681.532,
"heapDeltaBytes": -7843284,
"domNodes": 64,
"jsHeapTotalBytes": 25690112,
"scriptDurationMs": 99.21199999999999,
"eventListeners": 4,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.670000000000027
},
{
"name": "vue-large-graph-idle",
"durationMs": 12365.077999999925,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12355.603000000001,
"heapDeltaBytes": -13432820,
"domNodes": -3336,
"jsHeapTotalBytes": 18087936,
"scriptDurationMs": 641.0010000000001,
"eventListeners": -16484,
"totalBlockingTimeMs": 0,
"frameDurationMs": 18.329999999999927
},
{
"name": "vue-large-graph-idle",
"durationMs": 12303.395999999906,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12292.922999999999,
"heapDeltaBytes": -25594356,
"domNodes": -8347,
"jsHeapTotalBytes": 24117248,
"scriptDurationMs": 604.242,
"eventListeners": -16480,
"totalBlockingTimeMs": 0,
"frameDurationMs": 18.340000000000146
},
{
"name": "vue-large-graph-idle",
"durationMs": 12299.371999999948,
"styleRecalcs": 0,
"styleRecalcDurationMs": 0,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 12288.734999999999,
"heapDeltaBytes": -39133580,
"domNodes": -3326,
"jsHeapTotalBytes": 19398656,
"scriptDurationMs": 602.7289999999999,
"eventListeners": -16485,
"totalBlockingTimeMs": 0,
"frameDurationMs": 18.33000000000029
},
{
"name": "vue-large-graph-pan",
"durationMs": 14368.05800000002,
"styleRecalcs": 67,
"styleRecalcDurationMs": 15.410000000000007,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 14345.043,
"heapDeltaBytes": -3813260,
"domNodes": -3338,
"jsHeapTotalBytes": 21934080,
"scriptDurationMs": 859.3159999999999,
"eventListeners": -16488,
"totalBlockingTimeMs": 62,
"frameDurationMs": 19.98999999999978
},
{
"name": "vue-large-graph-pan",
"durationMs": 14222.8980000001,
"styleRecalcs": 66,
"styleRecalcDurationMs": 13.327000000000005,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 14204.281,
"heapDeltaBytes": 5741804,
"domNodes": -3338,
"jsHeapTotalBytes": 16166912,
"scriptDurationMs": 881.922,
"eventListeners": -16484,
"totalBlockingTimeMs": 26,
"frameDurationMs": 18.33000000000029
},
{
"name": "vue-large-graph-pan",
"durationMs": 14279.375999999957,
"styleRecalcs": 66,
"styleRecalcDurationMs": 13.150999999999996,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 14260.940000000002,
"heapDeltaBytes": -10184320,
"domNodes": -3340,
"jsHeapTotalBytes": 19312640,
"scriptDurationMs": 913.8129999999999,
"eventListeners": -16484,
"totalBlockingTimeMs": 0,
"frameDurationMs": 18.33000000000029
},
{
"name": "workflow-execution",
"durationMs": 443.5929999999644,
"styleRecalcs": 18,
"styleRecalcDurationMs": 26.993000000000002,
"layouts": 5,
"layoutDurationMs": 1.6019999999999996,
"taskDurationMs": 127.50500000000001,
"heapDeltaBytes": 4558124,
"domNodes": 166,
"jsHeapTotalBytes": 4718592,
"scriptDurationMs": 28.011000000000003,
"eventListeners": 55,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.65999999999999
},
{
"name": "workflow-execution",
"durationMs": 441.1479999999983,
"styleRecalcs": 18,
"styleRecalcDurationMs": 24.028,
"layouts": 5,
"layoutDurationMs": 1.2920000000000003,
"taskDurationMs": 122.72700000000003,
"heapDeltaBytes": 4415052,
"domNodes": 155,
"jsHeapTotalBytes": 0,
"scriptDurationMs": 31.673999999999992,
"eventListeners": 55,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.680000000000017
},
{
"name": "workflow-execution",
"durationMs": 453.5889999999654,
"styleRecalcs": 19,
"styleRecalcDurationMs": 27.436000000000003,
"layouts": 6,
"layoutDurationMs": 1.757,
"taskDurationMs": 142.80000000000004,
"heapDeltaBytes": 4490112,
"domNodes": 155,
"jsHeapTotalBytes": 4456448,
"scriptDurationMs": 35.270999999999994,
"eventListeners": 55,
"totalBlockingTimeMs": 0,
"frameDurationMs": 16.65999999999999
}
]
} |
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
2 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
Fix the bottom-right graph canvas toolbar (zoom controls, fit-to-view, minimap toggle) not being visible on mobile devices in normal graph mode.
Problem
PrimeVue applies
overflow: hiddento all.p-splitterpanelelements by default. TheGraphCanvasMenucomponent is absolutely positioned (right-0 bottom-0) inside thegraph-canvas-panelSplitterPanel. On mobile viewports, the panel's bounding box can be smaller than the full canvas area, causing the toolbar to be clipped by theoverflow: hidden.Solution
Add
overflow-visibleto thegraph-canvas-panelSplitterPanel class to override PrimeVue's defaultoverflow: hidden. This allows the absolutely-positioned toolbar (and minimap) to remain visible regardless of viewport size.┆Issue is synchronized with this Notion page by Unito