e9089ee8a1
Keep GitHub pull-request rows and previews readable within narrow import layouts. - Let mobile pull-request rows grow with wrapped titles, badges, and branch metadata. - Break long branch names within list rows and detail previews. - Cover modal and embedded presentations with layout and interaction regressions. - Add a patch changeset for the mobile layout fix. Files changed: .changeset/fn-9110-github-import-pulls-mobile.md | 7 +++ .../github-import-pulls-mobile-layout.test.ts | 54 ++++++++++++++++++++++ .../dashboard/app/components/GitHubImportModal.css | 27 ++++++++++- .../__tests__/GitHubImportModal.test.tsx | 32 +++++++++++++ 4 files changed, 119 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-9110 Fusion-Task-Lineage: 572b5fb3-076e-448a-9f6f-185b836b4161 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { readFileSync } from "fs";
|
|
import { resolve } from "path";
|
|
|
|
const githubImportCss = readFileSync(
|
|
resolve(__dirname, "../components/GitHubImportModal.css"),
|
|
"utf8",
|
|
);
|
|
|
|
function extractBlock(source: string, marker: string): string {
|
|
const start = source.indexOf(marker);
|
|
expect(start, `missing ${marker}`).toBeGreaterThanOrEqual(0);
|
|
const openingBrace = source.indexOf("{", start);
|
|
let depth = 0;
|
|
|
|
for (let index = openingBrace; index < source.length; index += 1) {
|
|
if (source[index] === "{") depth += 1;
|
|
if (source[index] === "}") depth -= 1;
|
|
if (depth === 0) return source.slice(openingBrace + 1, index);
|
|
}
|
|
|
|
throw new Error(`unterminated ${marker}`);
|
|
}
|
|
|
|
function extractRule(source: string, selector: string): string {
|
|
return extractBlock(source, `${selector} {`);
|
|
}
|
|
|
|
describe("GitHub import pull-request mobile layout (FN-9110)", () => {
|
|
it("lets Pull Requests rows grow and wraps unbroken branch names at the phone breakpoint", () => {
|
|
const phoneRules = extractBlock(githubImportCss, "@media (max-width: 640px)");
|
|
const rowRule = extractRule(phoneRules, ".issue-item");
|
|
const branchRule = extractRule(phoneRules, ".pull-branch-info");
|
|
|
|
expect(rowRule).toContain("flex-wrap: wrap;");
|
|
expect(rowRule).not.toMatch(/min-height\s*:/);
|
|
expect(branchRule).toContain("min-width: 0;");
|
|
expect(branchRule).toContain("overflow-wrap: anywhere;");
|
|
});
|
|
|
|
it("contains long PR preview branch text and keeps the detail body scrollable on narrow sheets", () => {
|
|
const detailActionSection = githubImportCss.slice(
|
|
githubImportCss.indexOf("The selected-issue mobile action row"),
|
|
);
|
|
const narrowRules = extractBlock(detailActionSection, "@media (max-width: 768px)");
|
|
const previewBranchRule = extractRule(narrowRules, ".preview-branch");
|
|
const detailPanelRule = extractRule(githubImportCss, ".github-import-detail-panel");
|
|
|
|
expect(previewBranchRule).toContain("min-width: 0;");
|
|
expect(previewBranchRule).toContain("overflow-wrap: anywhere;");
|
|
expect(detailPanelRule).toContain("min-height: 0;");
|
|
expect(detailPanelRule).toContain("overflow: hidden;");
|
|
});
|
|
});
|