mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 04:31:58 +00:00
fix: make graph canvas toolbar visible on mobile (#10168)
## 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: hidden` to all `.p-splitterpanel` elements by default. The `GraphCanvasMenu` component is absolutely positioned (`right-0 bottom-0`) inside the `graph-canvas-panel` SplitterPanel. On mobile viewports, the panel's bounding box can be smaller than the full canvas area, causing the toolbar to be clipped by the `overflow: hidden`. ## Solution Add `overflow-visible` to the `graph-canvas-panel` SplitterPanel class to override PrimeVue's default `overflow: hidden`. This allows the absolutely-positioned toolbar (and minimap) to remain visible regardless of viewport size. <img width="873" height="1056" alt="image" src="https://github.com/user-attachments/assets/7239a5ce-8ce8-4e1d-a8ff-6d6d3c61f5da" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10168-fix-make-graph-canvas-toolbar-visible-on-mobile-3266d73d36508130b675e839cb748fd5) by [Unito](https://www.unito.io)
This commit is contained in:
28
src/components/LiteGraphCanvasSplitterOverlay.test.ts
Normal file
28
src/components/LiteGraphCanvasSplitterOverlay.test.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { readFileSync } from 'fs'
|
||||
import { resolve } from 'path'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
/**
|
||||
* Regression test: the graph-canvas-panel SplitterPanel must not clip
|
||||
* absolutely-positioned children (like GraphCanvasMenu).
|
||||
*
|
||||
* PrimeVue applies `overflow: hidden` to all SplitterPanels by default.
|
||||
* Without an explicit `overflow-visible` override, the bottom-right canvas
|
||||
* toolbar becomes invisible on mobile viewports where the panel's bounding
|
||||
* box is smaller than the full canvas area.
|
||||
*
|
||||
* @see https://www.notion.so/Bug-Graph-canvas-toolbar-not-visible-on-mobile-3246d73d36508144ae00f10065c42fac
|
||||
*/
|
||||
describe('LiteGraphCanvasSplitterOverlay', () => {
|
||||
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/
|
||||
)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user