FN-8150: expand mobile import issue lists

Allow mobile issue lists to fill the available import-sheet height.

- Make the mobile import pane a constrained flex column with internal scrolling.
- Remove the 50vh list cap while preserving pagination and action access.
- Cover the responsive list sizing rules with a regression test.

Files changed:
 .../dashboard/app/components/GitHubImportModal.css     | 18 +++++++++++++++++-
 .../components/__tests__/GitHubImportModal.test.tsx    | 17 +++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-8150

Fusion-Task-Lineage: 92841921-7769-4304-b1f3-8c91aa18efb6

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-16 20:11:06 -07:00
parent e10ba2826f
commit 95dbf9558d
2 changed files with 34 additions and 1 deletions

View File

@@ -1567,8 +1567,24 @@ counterpart added later cannot silently reintroduce the band.
align-self: flex-start;
}
/*
FNXC:GitHubImport 2026-07-16-19:00:
FN-8150 requires populated GitHub, pull request, and GitLab lists to use the remaining height of
the mobile full-screen sheet rather than stopping at a 50vh cap. The GitHub list pane becomes a
constrained flex column so the list owns internal scrolling while pagination and the Cancel bar
remain reachable; the shared list rule also lets the stretched GitLab workspace list fill its row.
*/
.github-import-list-pane .github-import-pane-content {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.issues-list {
max-height: 50vh;
flex: 1 1 auto;
min-height: 0;
max-height: none;
}

View File

@@ -114,6 +114,23 @@ describe("GitHubImportModal", () => {
it("lets mobile issues lists fill the sheet without a 50vh cap", () => {
const source = readFileSync(resolve(__dirname, "../GitHubImportModal.css"), "utf8");
const mobileStyles = source.slice(
source.indexOf("@media (max-width: 640px)"),
source.indexOf("@keyframes github-import-spinner-spin"),
);
expect(mobileStyles).not.toContain("max-height: 50vh");
expect(mobileStyles).toContain(".github-import-list-pane .github-import-pane-content {");
expect(mobileStyles).toContain("display: flex;");
expect(mobileStyles).toContain("flex-direction: column;");
expect(mobileStyles).toContain(".issues-list {");
expect(mobileStyles).toContain("flex: 1 1 auto;");
expect(mobileStyles).toContain("min-height: 0;");
expect(mobileStyles).toContain("max-height: none;");
});
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] ?? "";