fix(FN-1136): tighten dashboard mobile header and mailbox layouts

- Move the overflow planning badge into a dedicated icon wrapper to prevent text overlap on mobile
- Add Header test coverage for active planning sessions in the mobile overflow menu
- Scope mailbox mobile CSS rules to .mailbox-modal to avoid global style bleed
- Refine mobile mailbox spacing, tab sizing, and minimum agent panel height for better small-screen usability
This commit is contained in:
gsxdsm
2026-04-08 04:59:00 -07:00
parent 07d50ee638
commit 182e30d5e9
4 changed files with 73 additions and 41 deletions

View File

@@ -412,33 +412,36 @@ describe("MailboxModal", () => {
const mailboxMobileSection = css.slice(sectionStart, sectionEnd);
expect(mailboxMobileSection).toContain("@media (max-width: 768px)");
expect(mailboxMobileSection).toContain(".mailbox-header");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-header");
expect(mailboxMobileSection).toContain("flex-wrap: wrap;");
expect(mailboxMobileSection).toContain(".mailbox-title");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-title");
expect(mailboxMobileSection).toContain("flex-shrink: 0;");
expect(mailboxMobileSection).toContain(".mailbox-header-actions");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-header-actions");
expect(mailboxMobileSection).toContain("overflow-x: auto;");
expect(mailboxMobileSection).toContain("-webkit-overflow-scrolling: touch;");
expect(mailboxMobileSection).toContain("scrollbar-width: none;");
expect(mailboxMobileSection).toContain(".mailbox-tabs::-webkit-scrollbar");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-tabs::-webkit-scrollbar");
expect(mailboxMobileSection).toContain("display: none;");
expect(mailboxMobileSection).toContain(".mailbox-tab");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-tab");
expect(mailboxMobileSection).toContain("padding: 8px 12px;");
expect(mailboxMobileSection).toContain("font-size: 0.8rem;");
expect(mailboxMobileSection).toContain("max-height: calc(100dvh - 120px);");
expect(mailboxMobileSection).toContain(".mailbox-message-detail-header");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-message-detail-header");
expect(mailboxMobileSection).toContain("flex-direction: column;");
expect(mailboxMobileSection).toContain("align-items: flex-start;");
expect(mailboxMobileSection).toContain(".mailbox-message-detail-actions");
expect(mailboxMobileSection).toContain(".mailbox-message-participants");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-message-detail-actions");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-message-participants");
expect(mailboxMobileSection).toContain("gap: 8px;");
expect(mailboxMobileSection).toContain(".mailbox-conversation-msg");
expect(mailboxMobileSection).toContain("padding: 8px 10px;");
expect(mailboxMobileSection).toContain(".mailbox-agent-select");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-conversation-msg");
expect(mailboxMobileSection).toContain("padding: 6px 10px;");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-agent-select");
expect(mailboxMobileSection).toContain("max-width: 100%;");
expect(mailboxMobileSection).toContain(".mailbox-compose-fab");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-agents");
expect(mailboxMobileSection).toContain("min-height: 200px;");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-compose-fab");
expect(mailboxMobileSection).toContain("bottom: 16px;");
expect(mailboxMobileSection).toContain("right: 16px;");
expect(mailboxMobileSection).toContain(".mailbox-empty");
expect(mailboxMobileSection).toContain(".mailbox-modal .mailbox-empty");
expect(mailboxMobileSection).toContain("padding: 32px 12px;");
});