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:
@@ -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;");
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user