diff --git a/.changeset/fn-7694-import-preview-tablet.md b/.changeset/fn-7694-import-preview-tablet.md new file mode 100644 index 0000000000..2b26374372 --- /dev/null +++ b/.changeset/fn-7694-import-preview-tablet.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Fix the GitHub/GitLab import preview panel being cut off on tablet-width screens. +category: fix +dev: The embedded Import Tasks view is container-query driven; the viewport `@media (max-width: 860px)` pane rules in GitHubImportModal.css were leaking `max-height: 50%` onto the embedded preview pane and are now scoped to `:not(.github-import-modal--embedded)`. diff --git a/packages/dashboard/app/components/GitHubImportModal.css b/packages/dashboard/app/components/GitHubImportModal.css index ad5ebb7a95..5ae8125fcf 100644 --- a/packages/dashboard/app/components/GitHubImportModal.css +++ b/packages/dashboard/app/components/GitHubImportModal.css @@ -1161,24 +1161,30 @@ Across the thread: a top filter (All/Human/Bot) and prev/next chevrons live in t /* Responsive breakpoints */ @media (max-width: 860px) { - /* FNXC:GitHubImport 2026-06-22-16:00: viewport-derived width is for the - dialog presentation only. :not(.github-import-modal--embedded) prevents - the embedded main-content view from being sized off the viewport — it - fills its own (potentially much narrower) content pane via the - container-query layout below. */ + /* FNXC:GitHubImport 2026-07-08-00:00: the ENTIRE tablet-band responsive + pane layout below (column-stack, resize-handle hiding, and the + flex:none/max-height:50% caps on the list/preview panes) is for the + dialog presentation only. All selectors are scoped with + :not(.github-import-modal--embedded) so the embedded Import Tasks + surface is governed solely by the base embedded rules + the + @container github-import-embedded blocks below — never by the + viewport. Previously only the width rule was scoped; the unscoped + `.github-import-preview-pane { max-height: 50% }` leaked into the + embedded view on tablet-width viewports (640–860px), clipping a tall + selected issue/PR preview with no way to reach the rest (FN-7694). */ .github-import-modal:not(.github-import-modal--embedded) { width: calc(100vw - (var(--space-lg) * 2)); } - .github-import-workspace { + .github-import-modal:not(.github-import-modal--embedded) .github-import-workspace { flex-direction: column; } - .github-import-workspace__resize-handle { + .github-import-modal:not(.github-import-modal--embedded) .github-import-workspace__resize-handle { display: none; } - .github-import-list-pane { + .github-import-modal:not(.github-import-modal--embedded) .github-import-list-pane { flex: none; border-right: none; border-bottom: 1px solid var(--border); @@ -1187,7 +1193,7 @@ Across the thread: a top filter (All/Human/Bot) and prev/next chevrons live in t max-height: 50%; } - .github-import-preview-pane { + .github-import-modal:not(.github-import-modal--embedded) .github-import-preview-pane { flex: none; max-height: 50%; } diff --git a/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx b/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx index 32cc11594f..24386d9058 100644 --- a/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx +++ b/packages/dashboard/app/components/__tests__/GitHubImportModal.test.tsx @@ -139,6 +139,37 @@ describe("GitHubImportModal", () => { expect(source).toContain(".modal.github-import-modal:not(.github-import-modal--embedded) {"); }); + it("FN-7694: does not viewport-cap the embedded preview pane in the tablet @media (max-width: 860px) band", () => { + const source = readFileSync(resolve(__dirname, "../GitHubImportModal.css"), "utf8"); + const tabletBlock = source.match(/@media \(max-width: 860px\) \{[\s\S]*?\n\}\n/)?.[0] ?? ""; + expect(tabletBlock).not.toBe(""); + + // The regressed leak: an UNSCOPED `.github-import-preview-pane { ... max-height: 50% ... }` + // (or `.github-import-list-pane`) rule inside the tablet media block would apply to the + // embedded surface too, clipping a tall selected issue/PR preview (FN-7694 symptom). + expect(tabletBlock).not.toMatch(/(?:^|\n)\s*\.github-import-preview-pane\s*\{[^}]*max-height:\s*50%/); + expect(tabletBlock).not.toMatch(/(?:^|\n)\s*\.github-import-list-pane\s*\{[^}]*max-height:\s*50%/); + + // Every pane/layout rule in the tablet block must be scoped to the non-embedded dialog only. + expect(tabletBlock).toContain( + ".github-import-modal:not(.github-import-modal--embedded) .github-import-preview-pane {\n flex: none;\n max-height: 50%;\n }", + ); + expect(tabletBlock).toContain(".github-import-modal:not(.github-import-modal--embedded) .github-import-list-pane {"); + expect(tabletBlock).toContain(".github-import-modal:not(.github-import-modal--embedded) .github-import-workspace {"); + expect(tabletBlock).toContain(".github-import-modal:not(.github-import-modal--embedded) .github-import-workspace__resize-handle {"); + + // Guard: the dialog path must still receive the tablet stacking/cap behavior (unchanged for non-embedded). + expect(tabletBlock).toMatch( + /\.github-import-modal:not\(\.github-import-modal--embedded\) \.github-import-list-pane \{[^}]*max-height:\s*50%[^}]*\}/, + ); + + // The embedded wide two-pane preview rule must keep its own non-capped layout so the fix + // cannot be silently reverted by re-adding a viewport cap. + const wideContainerBlock = source.match(/@container github-import-embedded \(min-width: 720px\) \{[\s\S]*?\n\}\n/)?.[0] ?? ""; + expect(wideContainerBlock).toContain(".github-import-modal--embedded .github-import-preview-pane {\n flex: 1 1 auto;\n min-height: 0;\n }"); + expect(wideContainerBlock).not.toContain("max-height: 50%"); + }); + 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] ?? "";