From 969d03b474f9f4232b65e51309323bb927c74fc9 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sun, 28 Jun 2026 16:46:04 -0700 Subject: [PATCH] FN-7208: make embedded import tasks fill the viewport 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) --- .../fn-7208-import-tasks-full-height.md | 7 +++++ .../app/components/GitHubImportModal.css | 4 +++ .../__tests__/GitHubImportModal.test.tsx | 30 +++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 .changeset/fn-7208-import-tasks-full-height.md diff --git a/.changeset/fn-7208-import-tasks-full-height.md b/.changeset/fn-7208-import-tasks-full-height.md new file mode 100644 index 0000000000..7cd01929b8 --- /dev/null +++ b/.changeset/fn-7208-import-tasks-full-height.md @@ -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`. diff --git a/packages/dashboard/app/components/GitHubImportModal.css b/packages/dashboard/app/components/GitHubImportModal.css index 138e1d8e81..13cf007226 100644 --- a/packages/dashboard/app/components/GitHubImportModal.css +++ b/packages/dashboard/app/components/GitHubImportModal.css @@ -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; } diff --git a/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx b/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx index 538e4be44e..a39cc521b6 100644 --- a/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx +++ b/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx @@ -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] ?? "";