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

feat(FN-4481): complete Step 4 — align github badge size and coverage

Browse Source 
Fusion-Task-Id: FN-4481
Fusion-Task-Lineage: 8b52379c-60b7-4cae-b655-7ed780c5c523
This commit is contained in:
Fusion
2026-05-14 09:07:16 -07:00
committed by gsxdsm
parent 25a6ad4865
commit c5f2dbb9a3
4 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dashboard/app/components/GitHubBadge.tsx
View File

@@ -27,7 +27,7 @@ export function GitHubBadge({ prInfo, issueInfo, onIssueRefresh: _onIssueRefresh
target="_blank"
rel="noopener noreferrer"
>
<GitPullRequest size={12} />
<GitPullRequest size={11} />
<span>#{prInfo.number}</span>
</a>
)}
@@ -39,7 +39,7 @@ export function GitHubBadge({ prInfo, issueInfo, onIssueRefresh: _onIssueRefresh
target="_blank"
rel="noopener noreferrer"
>
<CircleDot size={12} />
<CircleDot size={11} />
<span>#{issueInfo.number}</span>
</a>
)}

24
packages/dashboard/app/components/__tests__/GitHubBadge.test.tsx
View File

@@ -162,11 +162,29 @@ describe("GitHubBadge", () => {
const badge = screen.getByRole("link", { name: "#42" });
const styles = getComputedStyle(badge);
expect(styles.fontSize).toBe("9px");
expect(styles.fontSize).toBe("11px");
const resolvedGap = styles.gap.startsWith("var(")
? getComputedStyle(document.documentElement).getPropertyValue("--space-sm").trim()
? getComputedStyle(document.documentElement).getPropertyValue("--space-xs").trim()
: styles.gap;
expect(resolvedGap).toBe("8px");
expect(resolvedGap).toBe("4px");
});
it("renders PR icon at 11x11", () => {
const { container } = render(<GitHubBadge prInfo={mockPrInfo} />);
const icon = container.querySelector(".card-github-badge svg");
expect(icon).not.toBeNull();
expect(icon?.getAttribute("width")).toBe("11");
expect(icon?.getAttribute("height")).toBe("11");
});
it("renders Issue icon at 11x11", () => {
const { container } = render(<GitHubBadge issueInfo={mockIssueInfo} />);
const icon = container.querySelector(".card-github-badge svg");
expect(icon).not.toBeNull();
expect(icon?.getAttribute("width")).toBe("11");
expect(icon?.getAttribute("height")).toBe("11");
});
});

12
packages/dashboard/app/components/__tests__/TaskCard.test.tsx
View File

@@ -1818,6 +1818,18 @@ describe("TaskCard", () => {
expect(container.querySelector(".card-time-indicator")).not.toBeNull();
});
it("keeps GitHub badge sizing tokens aligned with card-time-indicator", () => {
const baseCss = loadAllAppCssBaseOnly();
expect(baseCss).toMatch(/\.card-github-badge\s*\{[^}]*padding:\s*var\(--space-xs\)\s+var\(--space-sm\);[^}]*\}/);
expect(baseCss).toMatch(/\.card-github-badge\s*\{[^}]*font-size:\s*0\.6875rem;[^}]*\}/);
expect(baseCss).toMatch(/\.card-github-badge\s*\{[^}]*gap:\s*var\(--space-xs\);[^}]*\}/);
expect(baseCss).toMatch(/\.card-github-badge\s*\{[^}]*font-family:\s*var\(--font-mono\);[^}]*\}/);
const fullCss = loadAllAppCss();
expect(fullCss).toMatch(/@media\s*\(max-width:\s*768px\)\s*\{[\s\S]*?\.card-github-badge\s*\{[^}]*font-size:\s*0\.625rem;[^}]*\}/);
});
it("prefers done-task /diff filesChanged over mergeDetails.filesChanged", () => {
useTaskDiffStatsMock.mockReturnValue({
stats: { filesChanged: 4, additions: 10, deletions: 2 },

15
packages/dashboard/app/styles.css
View File

@@ -1991,10 +1991,12 @@ input[type="range"]:focus-visible {
.card-github-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: 9px;
gap: var(--space-xs);
font-size: 0.6875rem;
font-weight: 600;
padding: 2px 6px;
line-height: 1;
font-family: var(--font-mono);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-pill);
border: 1px solid transparent;
color: inherit;
@@ -2004,6 +2006,13 @@ input[type="range"]:focus-visible {
transition: box-shadow var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}
@media (max-width: 768px) {
.card-github-badge {
padding: var(--space-xs) var(--space-sm);
font-size: 0.625rem;
}
}
.card-github-badge:hover {
filter: brightness(1.08);
}