fix(hub-ui): prevent popup dock rails from scrolling out of view - #360
fix(hub-ui): prevent popup dock rails from scrolling out of view#360SaKaNa-Y wants to merge 1 commit into
Conversation
Retained iframe panes can remain wider than the active viewport after a group sidebar appears. Their overflow lets Graph node centering scroll the outer DockStandalone grid and move the primary dock rail offscreen. Clip the outer grid and sized content viewport to contain retained panes and prevent programmatic scrolling of the dock layout while preserving iframe state and internal panel scrolling.
◈ PR Lens
Architecture 
1 component touched across 3 lanes. Data flow No data-flow sequence changed in this PR. Drill down
|
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
|
This PR fixes the remaining issue with the Vite and Rolldown module graphs in popup mode that I mentioned in vitejs/devtools#521. Popup mode now works as expected in my testing. |
Problem
In the popup dock, opening an ungrouped dock entry such as UnoCSS before switching to Vite+ → Vite or Rolldown → Modules Graph → Graph can scroll the entire layout left and move the primary dock rail out of view. Opening Graph directly does not reproduce the same overflow. The standalone viewer uses the same
DockStandalonecomponent and is also affected.Inactive iframe panes retain their previous dimensions. Adding the 48px group sidebar narrows the active content viewport, while the previously opened pane remains 48px wider. That pane's overflow reaches the outer grid, where
overflow: hiddenstill permits programmatic scrolling. Graph's node-centeringscrollIntoView()can then scroll the dock layout along with the graph.Fix
Use
overflow: clipon the outerDockStandalonegrid and its sized content viewport. The content boundary contains retained panes, and the outer boundary keeps the dock rails anchored. Iframe state, retained dimensions, and scrolling inside each panel are preserved.This extends the containment approach used for edge mode in #220 and #255 to the layout shared by popup and standalone views. The change is limited to two class edits in
DockStandalone.vue.Verification
pnpm lint— passed.pnpm knip— passed.pnpm test— 128 test files passed; 1457 tests passed, 9 skipped.pnpm typecheck— passed.pnpm build— passed.clientWidth=1210,scrollWidth=1258, and changed fromscrollLeft=0to48after opening Graph.scrollLeft=0with no horizontal overflow after UnoCSS → Vite Graph and List → Graph. The inactive iframe retained its wider dimensions, and list content still scrolled internally.The browser regression was checked interactively; no new automated browser test was added.