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

feat(FN-4163): make github tracking enable button compact on desktop

Browse Source 
Adds compact desktop styling for the GitHub tracking enable button in the task detail modal, with a new CSS regression test covering the button styling.

Fusion-Task-Id: FN-4163
This commit is contained in:
Fusion
2026-05-12 22:14:25 -07:00
committed by gsxdsm
parent f8066c4a06
commit 1802fdeb7d
3 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard/app/components/TaskDetailModal.css
View File

@@ -438,8 +438,10 @@
.detail-github-tracking-enable {
margin-left: auto;
align-self: flex-start;
align-self: center;
flex: 0 0 auto;
min-width: 0;
min-height: 0;
padding-block: calc(var(--space-xs) / 2);
padding-inline: var(--space-sm);
line-height: 1.2;
@@ -1639,6 +1641,8 @@
.detail-github-tracking-section .detail-github-tracking-enable {
margin-left: auto;
min-width: 44px; /* Match the global .touch-target minimum on mobile. */
min-height: 44px; /* Match the global .touch-target minimum on mobile. */
justify-content: center;
}

16
packages/dashboard/app/components/__tests__/TaskDetailModal.github-tracking-enable.css.test.ts Normal file
View File

@@ -0,0 +1,16 @@
import { describe, expect, it } from "vitest";
import { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
describe("TaskDetailModal GitHub tracking enable button CSS contract", () => {
it("FN-4163 keeps the desktop Enable button compact while preserving the mobile touch target", async () => {
const baseCss = await loadAllAppCssBaseOnly();
const css = await loadAllAppCss();
expect(baseCss).toMatch(
/\.detail-github-tracking-enable\s*\{[^}]*min-width\s*:\s*0\s*;[^}]*min-height\s*:\s*0\s*;/,
);
expect(css).toMatch(
/@media\s*\(max-width:\s*768px\)\s*\{[\s\S]*?\.detail-github-tracking-section\s+\.detail-github-tracking-enable\s*\{[^}]*min-width\s*:\s*44px\s*;[^}]*min-height\s*:\s*44px\s*;/,
);
});
});