jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): prevent mobile scroll by using flex layout for canvas page 

On mobile, header/tab-row switch from fixed to sticky (in-flow), but
#app.canvas-layout still had height:100vh — total content exceeded
viewport causing unwanted scroll. Fix: body becomes a flex column
(100dvh, overflow hidden), header/tab-row flex-shrink:0, #app fills
remaining space with flex:1.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-21 16:50:10 -07:00
parent 64f9603e39
commit 0067369af1
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
website/public/shell.css
View File

@ -406,8 +406,26 @@ body.rstack-sidebar-open #toolbar {
#app { #app {
padding-top: 0; padding-top: 0;
} }
/* Canvas on mobile: header/tab-row are sticky (in-flow), so body must
become a flex column to prevent the 100vh #app from overflowing. */
body:has(#app.canvas-layout) {
height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
display: flex;
flex-direction: column;
}
body:has(#app.canvas-layout) .rstack-header {
flex-shrink: 0;
}
body:has(#app.canvas-layout) .rstack-tab-row {
flex-shrink: 0;
}
#app.canvas-layout { #app.canvas-layout {
padding-top: 0; padding-top: 0;
height: auto;
flex: 1;
min-height: 0;
} }
.rspace-iframe-wrap { .rspace-iframe-wrap {
position: relative; position: relative;