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

FN-7208: make embedded import tasks fill the viewport

Browse Source 
Embedded Import Tasks panes now flex to the available viewport height.\n\n- Add a base embedded-body flex rule shared by Issues and Pull Requests.\n- Cover the full-height behavior and non-embedded modal safeguards in CSS tests.\n- Add a patch changeset for the published Fusion package.\n\nFiles changed:\n .changeset/fn-7208-import-tasks-full-height.md     |  7 +++++\n .../dashboard/app/components/GitHubImportModal.css |  4 +++\n .../__tests__/GitHubImportModal.test.tsx           | 30 ++++++++++++++++++++++\n 3 files changed, 41 insertions(+)

Fusion-Task-Id: FN-7208

Fusion-Task-Lineage: 483889f2-48db-4c18-a58c-63f9a3661e45

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-06-28 16:46:04 -07:00
parent a583446e60
commit 969d03b474
3 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/fn-7208-import-tasks-full-height.md Normal file
View File

@@ -0,0 +1,7 @@
---
"@runfusion/fusion": patch
---
summary: Import Tasks view now fills the full height of the screen for Issues and Pull Requests.
category: fix
dev: Embedded GitHubImportModal `.github-import-modal__body` gets `flex: 1` outside the <=640px block so the flex/height chain fills `.project-content`.

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

@@ -1510,8 +1510,12 @@ Fix (embedded variant only — modal path untouched): turn the embedded root int
/*
FNXC:RightDockEmbedding 2026-06-22-01:00:
Embedded Import Tasks must scroll vertically so a long preview is fully reachable. The view body is the scroll container; in the stacked (narrow) layout the preview takes its natural (content) height and the body scrolls, so the preview can be much taller than the viewport. In the wide two-pane layout the preview keeps its own internal scroll.
FNXC:GitHubImport 2026-06-28-00:00:
Issues and Pull Requests share this embedded body/workspace chain, so the body must flex-fill the main-content pane at all widths. Keeping the fix scoped to `.github-import-modal--embedded` preserves the non-embedded dialog path byte-for-byte while eliminating blank space below short/idle workspaces.
*/
.github-import-modal--embedded .github-import-modal__body {
flex: 1;
min-height: 0;
overflow-y: auto;
}

30
packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx
View File

@@ -95,6 +95,36 @@ describe("GitHubImportModal", () => {
expect(source).toContain(".github-import-preview-pane.mobile.active .github-import-pane-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;");
});
it("makes the embedded import body fill the pane outside the mobile media block", () => {
const source = readFileSync(resolve(__dirname, "../GitHubImportModal.css"), "utf8");
const topLevelEmbeddedBodyRules = Array.from(
source.matchAll(/(?:^|\n)\.github-import-modal--embedded \.github-import-modal__body\s*\{[^}]*\}/g),
(match) => match[0],
);
// FNXC:GitHubImport 2026-06-28-00:00: Issues and Pull Requests share `.github-import-workspace`, so the base embedded body fill rule protects both tabs in wide two-pane and narrow stacked layouts before the <=640px media override applies.
expect(topLevelEmbeddedBodyRules.some((rule) => rule.includes("flex: 1;") && rule.includes("min-height: 0;") && rule.includes("overflow-y: auto;"))).toBe(true);
const mobileEmbeddedBodyRule = source.match(/@media \(max-width: 640px\) \{[\s\S]*?\.github-import-modal--embedded \.github-import-modal__body\s*\{[^}]*\}/)?.[0] ?? "";
expect(mobileEmbeddedBodyRule).toContain("flex: 1;");
expect(mobileEmbeddedBodyRule).toContain("overflow-y: auto;");
});
it("keeps the non-embedded modal body and dialog sizing rules unchanged", () => {
const source = readFileSync(resolve(__dirname, "../GitHubImportModal.css"), "utf8");
const baseModalBodyRule = source.match(/(?:^|\n)\.github-import-modal__body\s*\{[^}]*\}/)?.[0] ?? "";
expect(baseModalBodyRule).toContain("display: flex;");
expect(baseModalBodyRule).toContain("flex-direction: column;");
expect(baseModalBodyRule).toContain("padding: var(--space-lg) var(--space-xl);");
expect(baseModalBodyRule).toContain("overflow-y: auto;");
expect(baseModalBodyRule).toContain("min-height: 0;");
expect(baseModalBodyRule).not.toContain("flex: 1;");
expect(source).toContain(".github-import-modal:not(.github-import-modal--embedded) {");
expect(source).toContain(".modal-overlay:has(.github-import-modal:not(.github-import-modal--embedded)) {");
expect(source).toContain(".modal.github-import-modal:not(.github-import-modal--embedded) {");
});
it("styles import type tabs like the Artifacts button bar", () => {
const source = readFileSync(resolve(__dirname, "../GitHubImportModal.css"), "utf8");
const tabsRule = source.match(/\.github-import-tabs\s*\{[^}]*\}/)?.[0] ?? "";