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

feat(FN-3200): align settings heading indentation and gutters

Browse Source 
Aligns the settings modal heading indentation and subsection heading underlines to a consistent CSS contract, adding tests to lock the alignment behavior across both desktop and mobile viewports.

Fusion-Task-Id: FN-3200
This commit is contained in:
Fusion
2026-05-02 05:36:31 -07:00
committed by gsxdsm
parent d3465b6cd6
commit 9d1736fc64
4 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/dashboard/app/components/SettingsModal.css
View File

@@ -359,8 +359,8 @@
.settings-section-heading {
font-size: 14px;
font-weight: 600;
padding: var(--space-lg) var(--space-xl) var(--space-md);
margin: 0 var(--space-xl) 0;
padding: var(--space-lg) 0 var(--space-md);
margin: 0;
color: var(--text);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-xs);
@@ -1473,8 +1473,8 @@
}
.settings-section-heading {
padding: var(--space-lg) var(--space-lg) var(--space-md);
margin: 0 var(--space-lg) 0;
padding: var(--space-lg) 0 var(--space-md);
margin: 0;
}
.settings-plugins-subsection-toggle {

14
packages/dashboard/app/components/__tests__/SettingsModal.test.tsx
View File

@@ -191,6 +191,20 @@ const MODEL_FIXTURE = [
];
describe("SettingsModal", () => {
it("renders section headings with the shared settings-section-heading class", async () => {
const { container } = renderModal();
await waitForSettingsModalReady();
const authenticationHeading = screen.getByRole("heading", { name: "Authentication" });
expect(authenticationHeading).toHaveClass("settings-section-heading");
await userEvent.click(screen.getAllByRole("button", { name: /^General$/ })[0]);
const generalHeading = screen.getByRole("heading", { name: "General" });
expect(generalHeading).toHaveClass("settings-section-heading");
expect(container.querySelectorAll(".settings-section-heading").length).toBeGreaterThan(0);
});
beforeEach(() => {
vi.clearAllMocks();
Object.defineProperty(window, "matchMedia", {

6
packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
View File

@@ -310,6 +310,8 @@ describe("SettingsModal mobile adaptations", () => {
expectMobileRule(css, ".settings-nav-item", "justify-content: center;");
expectMobileRule(css, ".settings-nav-item", "gap: 4px;");
expectMobileRule(css, ".settings-content textarea", "font-size: 16px;");
expectMobileRule(css, ".settings-section-heading", "padding: var(--space-lg) 0 var(--space-md);");
expectMobileRule(css, ".settings-section-heading", "margin: 0;");
expectMobileRule(css, ".settings-scope-icon", "margin-right: 0;");
expectMobileRule(css, ".settings-scope-banner", "padding: var(--space-sm) var(--space-lg);");
expectMobileRule(css, ".settings-empty-state", "padding: 12px 14px;");
@@ -340,5 +342,9 @@ describe("SettingsModal mobile adaptations", () => {
expectBaseRule(css, ".settings-content::-webkit-scrollbar", "width: 6px;");
expectBaseRule(css, ".settings-content::-webkit-scrollbar-thumb", "background: var(--border);");
expectBaseRule(css, ".settings-content::-webkit-scrollbar-thumb:hover", "background: var(--text-muted);");
expectBaseRule(css, ".settings-section-heading", "padding: var(--space-lg) 0 var(--space-md);");
expectBaseRule(css, ".settings-section-heading", "margin: 0;");
expectBaseRule(css, ".settings-section-heading", "border-bottom: 1px solid var(--border);");
});
});

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

@@ -1402,8 +1402,8 @@ input[type="range"]:focus-visible {
.settings-section-heading {
font-size: 14px;
font-weight: 600;
padding: var(--space-lg) var(--space-xl) var(--space-md);
margin: 0 var(--space-xl) 0;
padding: var(--space-lg) 0 var(--space-md);
margin: 0;
color: var(--text);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-xs);
@@ -3160,8 +3160,8 @@ input[type="range"]:focus-visible {
}
.settings-section-heading {
padding: var(--space-lg) var(--space-lg) var(--space-md);
margin: 0 var(--space-lg) 0;
padding: var(--space-lg) 0 var(--space-md);
margin: 0;
}
.form-group {