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

feat(FN-4149): normalize mobile toolbar sizing and add touch target coverag

Browse Source 
Added test coverage for mobile toolbar touch target CSS and normalized mobile toolbar sizing in the FileBrowser component.

Fusion-Task-Id: FN-4149
This commit is contained in:
Fusion
2026-05-12 17:48:57 -07:00
committed by gsxdsm
parent 12a08cbd29
commit 2ea489d689
2 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/dashboard/app/components/FileBrowser.css
View File

@@ -390,7 +390,7 @@
}
.file-editor-toolbar {
align-items: flex-start;
align-items: center;
}
.file-editor-toolbar-actions {
@@ -400,6 +400,7 @@
.file-editor-toolbar-actions .btn {
min-height: var(--mobile-nav-height);
min-width: var(--mobile-nav-height);
}
.file-browser-modal-header .modal-close {

32
packages/dashboard/app/components/__tests__/FileEditor.test.tsx
View File

@@ -1,5 +1,6 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { loadAllAppCss } from "../../test/cssFixture";
import { FileEditor } from "../FileEditor";
describe("FileEditor", () => {
@@ -344,6 +345,37 @@ describe("FileEditor", () => {
});
});
describe("mobile toolbar CSS", () => {
it("keeps file editor toolbar action buttons at a shared mobile touch target size", () => {
const css = loadAllAppCss();
const selectorIndex = css.indexOf(".file-editor-toolbar-actions .btn");
expect(selectorIndex).toBeGreaterThanOrEqual(0);
const mediaIndex = css.lastIndexOf("@media (max-width: 768px)", selectorIndex);
expect(mediaIndex).toBeGreaterThanOrEqual(0);
const openBraceIndex = css.indexOf("{", mediaIndex);
let depth = 1;
let cursor = openBraceIndex + 1;
while (cursor < css.length && depth > 0) {
if (css[cursor] === "{") {
depth += 1;
} else if (css[cursor] === "}") {
depth -= 1;
}
cursor += 1;
}
const mobileCss = css.slice(openBraceIndex + 1, cursor - 1);
expect(mobileCss).toMatch(
/\.file-editor-toolbar-actions\s+\.btn\s*\{[^}]*min-height:\s*var\(--mobile-nav-height\);[^}]*min-width:\s*var\(--mobile-nav-height\);[^}]*\}/,
);
});
});
describe("markdown preview scrollability", () => {
it("preview container has correct CSS classes for scrolling", () => {
render(<FileEditor content="# Hello World" onChange={vi.fn()} filePath="readme.md" />);