diff --git a/.changeset/mobile-board-sr-only-overflow.md b/.changeset/mobile-board-sr-only-overflow.md new file mode 100644 index 0000000000..cb1ad7aeb5 --- /dev/null +++ b/.changeset/mobile-board-sr-only-overflow.md @@ -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. diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css index a8dac93175..068829d8f0 100644 --- a/packages/dashboard/app/styles.css +++ b/packages/dashboard/app/styles.css @@ -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;