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

fix(FN-2551): normalize mailbox mobile header control sizing

Browse Source 
- Consolidate mobile mailbox header-actions rules for modal and view layouts with tokenized spacing
- Enforce 36px minimum height/width for action buttons and icon controls on mobile
- Normalize modal close control mobile padding and radius for consistent alignment
- Add CSS contract assertions in MailboxModal and MailboxView tests for spacing and control dimensions
This commit is contained in:
Fusion
2026-04-25 15:37:02 -07:00
committed by gsxdsm
parent 825fecbb35
commit f589359e83
3 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/dashboard/app/components/MailboxModal.css
View File

@@ -560,9 +560,33 @@
flex-shrink: 0; flex-shrink: 0;
} }
.mailbox-modal .mailbox-header-actions { .mailbox-modal .mailbox-header-actions,
.mailbox-view .mailbox-header-actions {
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; align-items: center;
gap: var(--space-sm);
}
.mailbox-modal .mailbox-header-actions .btn,
.mailbox-modal .mailbox-header-actions .btn-icon,
.mailbox-modal .mailbox-header-actions .modal-close,
.mailbox-view .mailbox-header-actions .btn,
.mailbox-view .mailbox-header-actions .btn-icon {
min-height: 36px;
}
.mailbox-modal .mailbox-header-actions .btn-icon,
.mailbox-modal .mailbox-header-actions .modal-close,
.mailbox-view .mailbox-header-actions .btn-icon {
min-width: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mailbox-modal .mailbox-header-actions .modal-close {
padding: 0;
border-radius: var(--radius-sm);
} }
.mailbox-modal .mailbox-tabs { .mailbox-modal .mailbox-tabs {
@@ -637,11 +661,6 @@
flex-shrink: 0; flex-shrink: 0;
} }
.mailbox-view .mailbox-header-actions {
flex-wrap: wrap;
gap: 6px;
}
.mailbox-view .mailbox-tabs { .mailbox-view .mailbox-tabs {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

5
packages/dashboard/app/components/__tests__/MailboxModal.test.tsx
View File

@@ -845,7 +845,10 @@ describe("MailboxModal", () => {
expect(mailboxMobileSection).toContain("flex-wrap: wrap;"); expect(mailboxMobileSection).toContain("flex-wrap: wrap;");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-title"); expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-title");
expect(mailboxMobileSection).toContain("flex-shrink: 0;"); expect(mailboxMobileSection).toContain("flex-shrink: 0;");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-header-actions"); expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions,\s*\.mailbox-view \.mailbox-header-actions\s*\{[^}]*gap:\s*var\(--space-sm\);[^}]*\}/);
expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions \.btn,[^}]*\.mailbox-view \.mailbox-header-actions \.btn-icon\s*\{[^}]*min-height:\s*36px;[^}]*\}/);
expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions \.btn-icon,[^}]*\.mailbox-view \.mailbox-header-actions \.btn-icon\s*\{[^}]*min-width:\s*36px;[^}]*display:\s*inline-flex;[^}]*\}/);
expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions \.modal-close\s*\{[^}]*padding:\s*0;[^}]*border-radius:\s*var\(--radius-sm\);[^}]*\}/);
expect(mailboxMobileSection).toContain("overflow-x: auto;"); expect(mailboxMobileSection).toContain("overflow-x: auto;");
expect(mailboxMobileSection).toContain("-webkit-overflow-scrolling: touch;"); expect(mailboxMobileSection).toContain("-webkit-overflow-scrolling: touch;");
expect(mailboxMobileSection).toContain("scrollbar-width: none;"); expect(mailboxMobileSection).toContain("scrollbar-width: none;");

3
packages/dashboard/app/components/__tests__/MailboxView.test.tsx
View File

@@ -1163,6 +1163,9 @@ describe("MailboxView", () => {
expect(mailboxMobileSection).toContain("@media (max-width: 768px)"); expect(mailboxMobileSection).toContain("@media (max-width: 768px)");
// Verify .mailbox-view selectors are in mobile section // Verify .mailbox-view selectors are in mobile section
expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-header"); expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-header");
expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions,\s*\.mailbox-view \.mailbox-header-actions\s*\{[^}]*gap:\s*var\(--space-sm\);[^}]*\}/);
expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions \.btn,[^}]*\.mailbox-view \.mailbox-header-actions \.btn-icon\s*\{[^}]*min-height:\s*36px;[^}]*\}/);
expect(mailboxMobileSection).toMatch(/\.mailbox-modal \.mailbox-header-actions \.btn-icon,[^}]*\.mailbox-view \.mailbox-header-actions \.btn-icon\s*\{[^}]*min-width:\s*36px;[^}]*display:\s*inline-flex;[^}]*\}/);
expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-tabs"); expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-tabs");
expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-content"); expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-content");
expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-split-layout"); expect(mailboxMobileSection).toContain(".mailbox-view .mailbox-split-layout");