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

FN-5910: fix skills toggle mobile anchoring

Browse Source 
Keep the Skills view toggle anchored correctly after skill enablement on mobile and desktop.

- add relative positioning to the Skills view toggle wrapper so the hidden input stays aligned with its label
- expand the CSS regression test to verify the hidden input anchoring contract and checked-toggle geometry selectors

Files changed:
 packages/dashboard/app/components/SkillsView.css   |  1 +
 .../components/__tests__/SkillsView.css.test.ts    | 30 +++++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-5910

Fusion-Task-Lineage: d5988ddb-febe-4319-bfef-d0dbc37909ba
This commit is contained in:
gsxdsm
2026-06-02 19:10:50 -07:00
parent 38b84a36f4
commit 6d2a08d7d7
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/dashboard/app/components/__tests__/SkillsView.css.test.ts
View File

@@ -55,11 +55,35 @@ describe("SkillsView/runtime-card token guardrails", () => {
expect(infoBlock).toContain("width: auto");
});
it("anchors the hidden toggle input to the toggle label across desktop and mobile", async () => {
const css = await loadAllAppCss();
const toggleBlock = extractRuleBlock(css, ".skills-view-item-toggle");
const inputBlock = extractRuleBlock(css, ".skills-view-item-toggle input");
const mobileMediaBlock = extractMobileMediaBlocks(css);
const mobileToggleBlock = extractRuleBlock(mobileMediaBlock, ".skills-view-item-toggle");
expect(toggleBlock).toContain("position: relative");
expect(inputBlock).toContain("position: absolute");
expect(inputBlock).toContain("clip: rect(0, 0, 0, 0)");
expect(mobileToggleBlock).not.toMatch(/position\s*:/);
});
it("keeps checked and unchecked toggle geometry token-aligned", async () => {
const css = await loadAllAppCss();
const sliderBlock = extractRuleBlock(css, ".skills-view-toggle-slider");
const checkedSliderBlock = extractRuleBlock(
css,
".skills-view-item-toggle input:checked + .skills-view-toggle-slider"
);
const checkedKnobBlock = extractRuleBlock(
css,
".skills-view-item-toggle input:checked + .skills-view-toggle-slider::after"
);
expect(css).toContain("width: calc(var(--space-xl) + var(--space-lg))");
expect(css).toContain("transform: translateX(calc(var(--space-lg) + (var(--space-xs) / 2)))");
expect(css).toContain("background: var(--color-success)");
expect(sliderBlock).toContain("width: calc(var(--space-xl) + var(--space-lg))");
expect(checkedSliderBlock).toContain("background: var(--color-success)");
expect(checkedKnobBlock).toContain(
"transform: translateX(calc(var(--space-lg) + (var(--space-xs) / 2)))"
);
});
});