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

fix(dashboard): GitHub import embedded view scrolls on narrow mobile

Browse Source 
At narrow viewports the embedded view entered the dialog's mobile single-pane rules (overflow:hidden workspace + inner pane-content scroll), but the embedded body-scroll model flipped panes to natural height with no inner scroll — leaving orphaned overflow:hidden clips and no scroll owner, so a tall preview was unreachable. Add an embedded-scoped @media(max-width:640px) override making .github-import-modal__body the single scroll owner with the chain at natural height/overflow:visible. Wide two-pane + non-embedded dialog untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-22 11:02:00 -07:00
parent 44257dd8ea
commit 50e271535e
1 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/dashboard/app/components/GitHubImportModal.css
View File

@@ -1149,6 +1149,54 @@ a.github-import-pr-check-name:hover {
overscroll-behavior: contain;
}
/*
FNXC:GitHubImport 2026-06-23-02:45:
Narrow-mobile (viewport <= 640px) EMBEDDED scroll fix. isMobile is viewport-derived, so at <= 640px the
embedded Import Tasks view also enters mobile single-pane mode and inherits the @640 nested-scroll design
intended for the dialog (workspace/pane `overflow: hidden`, pane-content `overflow-y: auto`). But the
embedded block (later in source) flips the preview pane + its content to natural height + `overflow-y: visible`
so the VIEW BODY is meant to be the scroll owner — leaving the @640 `overflow: hidden` on the workspace and
the active preview pane as orphaned clips with no inner scroll owner, so a tall preview (body, checks, comments)
was cut off with no way to reach it.
Fix: in narrow embedded mode make `.github-import-modal__body` the single scroll owner (flex:1; overflow-y:auto)
and give every ancestor in the chain (workspace, the active list/preview panes, pane-content) natural height with
`overflow: visible` so nothing traps or clips the growing content. The list keeps its own `.issues-list`
internal scroll. Wide (>=720px container) two-pane behavior and the dialog (non-embedded) path are untouched —
this rule is scoped to `.github-import-modal--embedded`.
*/
.github-import-modal--embedded .github-import-modal__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.github-import-modal--embedded .github-import-workspace {
flex: 0 0 auto;
min-height: 0;
overflow: visible;
}
.github-import-modal--embedded .github-import-list-pane.mobile.active,
.github-import-modal--embedded .github-import-preview-pane.mobile.active {
flex: 0 0 auto;
max-height: none;
overflow: visible;
}
/* Single scroll owner: let the list grow with the page instead of owning a nested scroll. */
.github-import-modal--embedded .github-import-list-pane.mobile.active .issues-list {
max-height: none;
overflow-y: visible;
}
.github-import-modal--embedded .github-import-preview-pane.mobile.active .github-import-pane-content {
flex: 0 0 auto;
min-height: auto;
overflow-y: visible;
overscroll-behavior: auto;
}
/* Back button styles */
.github-import-back-button {
display: inline-flex;