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

feat(FN-1463): fix settings tab highlight alignment on mobile

Browse Source 
- Fix settings modal tab alignment on mobile by switching .settings-nav-item to flexbox
- Add align-items: center to .settings-sidebar for icon+label vertical alignment
- Add justify-content: center and gap: 4px to .settings-nav-item
- Remove deprecated text-align: center from .settings-nav-item
- Add regression tests for new CSS properties in settings-mobile tests
This commit is contained in:
gsxdsm
2026-04-10 10:38:29 -07:00
parent c78ffaab5c
commit 583285fa65
4 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fix-settings-tab-highlight-alignment.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@gsxdsm/fusion": patch
---
Fix Settings modal tab/highlight alignment on mobile by using flexbox for icon+label alignment. The active indicator (bottom border) now visually lines up with the tab label text across all sections, including rows with scope icons.

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

@@ -75,7 +75,13 @@ describe("core modals mobile css coverage", () => {
expect(mobileBlock).toContain("flex-direction: column;");
expect(mobileBlock).toContain(".settings-sidebar {");
expect(mobileBlock).toContain("flex-direction: row;");
expect(mobileBlock).toContain("align-items: center;");
expect(mobileBlock).toContain("overflow-x: auto;");
expect(mobileBlock).toContain(".settings-nav-item {");
expect(mobileBlock).toContain("display: flex;");
expect(mobileBlock).toContain("align-items: center;");
expect(mobileBlock).toContain("justify-content: center;");
expect(mobileBlock).toContain("gap: 4px;");
});
it("GitManagerModal: 768px mobile block includes stacked layout rules", () => {

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

@@ -131,9 +131,14 @@ describe("SettingsModal mobile adaptations", () => {
expectMobileRule(css, ".settings-layout", "flex-direction: column;");
expectMobileRule(css, ".settings-sidebar", "flex-direction: row;");
expectMobileRule(css, ".settings-sidebar", "align-items: center;");
expectMobileRule(css, ".settings-sidebar", "overflow-x: auto;");
expectMobileRule(css, ".settings-sidebar", "scrollbar-width: none;");
expectMobileRule(css, ".settings-sidebar::-webkit-scrollbar", "display: none;");
expectMobileRule(css, ".settings-nav-item", "display: flex;");
expectMobileRule(css, ".settings-nav-item", "align-items: center;");
expectMobileRule(css, ".settings-nav-item", "justify-content: center;");
expectMobileRule(css, ".settings-nav-item", "gap: 4px;");
expectMobileRule(css, ".settings-content textarea", "font-size: 16px;");
});
});

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

@@ -6485,6 +6485,7 @@ body {
width: auto;
min-width: 0;
flex-direction: row;
align-items: center;
border-right: none;
border-bottom: 1px solid var(--border);
overflow-x: auto;
@@ -6499,12 +6500,15 @@ body {
}
.settings-nav-item {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
border-left: none;
border-bottom: 2px solid transparent;
border-radius: var(--radius) var(--radius) 0 0;
padding: 6px 12px;
white-space: nowrap;
text-align: center;
}
.settings-nav-item:hover {