root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: lock mobile board to viewport by pinning .visually-hidden

Browse Source 
Screen-reader-only spans were position:absolute with no offsets, so inside
the horizontally-scrolled kanban columns they rendered off-screen-right and
ballooned documentElement.scrollWidth to ~1388px on a 390px viewport. That
triggered iOS Safari shrink-to-fit zoom-out (the "cut off, zoomed out" view,
which persisted into list view) and let the whole page pan, dragging columns
off-screen. Pinning the utility to its containing block origin (top/left: 0)
keeps the document locked to the viewport; the span stays 1px and clipped.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-13 17:10:59 -07:00
parent 96773dda0c
commit 3cc82bdc4c
2 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/mobile-board-sr-only-overflow.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Fix mobile board horizontal overflow that caused iOS Safari to zoom-out/cut-off the board and let the whole page pan off-screen. Screen-reader-only `.visually-hidden` spans were `position: absolute` with no offsets, so inside the horizontally-scrolled kanban columns they rendered off-screen-right and ballooned the document's scroll width. Pinning the utility to its containing block's origin keeps the document locked to the viewport on mobile.

8
packages/dashboard/app/styles.css
View File

@@ -48,6 +48,14 @@ html {
/* === Utility Classes === */
.visually-hidden {
position: absolute;
/* Pin to the containing block's origin. Without offsets an absolute box
renders at its static-flow position; inside a horizontal scroller (e.g.
the kanban board) that position is off-screen-right, and because the
scroll container isn't a positioned containing block its overflow can't
clip the span — so it balloons documentElement.scrollWidth and triggers
iOS shrink-to-fit zoom-out + whole-page panning on mobile. */
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;