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

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

Browse Source 
- 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 a0ad924e6b
commit 8e8fc07dc1
4 changed files with 73 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/dashboard/app/components/Header.tsx
View File

@@ -648,13 +648,15 @@ export function Header({
role="menuitem"
data-testid="overflow-planning-btn"
>
<Lightbulb size={16} />
<span className="mobile-overflow-icon-wrapper">
<Lightbulb size={16} />
{activePlanningSessionCount > 0 && (
<span className="header-badge header-badge--pulse" data-testid="overflow-planning-badge">
{activePlanningSessionCount}
</span>
)}
</span>
<span>{activePlanningSessionCount > 0 ? `Resume planning session (${activePlanningSessionCount})` : "Create a task with AI planning"}</span>
{activePlanningSessionCount > 0 && (
<span className="header-badge header-badge--pulse" data-testid="overflow-planning-badge">
{activePlanningSessionCount}
</span>
)}
</button>
{/* Git Manager - in overflow on mobile */}
{onOpenGitManager && (

24
packages/dashboard/app/components/__tests__/Header.test.tsx
View File

@@ -504,6 +504,30 @@ describe("Header", () => {
expect(onOpenPlanning).toHaveBeenCalled();
});
it("renders overflow planning badge inside icon wrapper when sessions are active", () => {
const onResumePlanning = vi.fn();
render(
<Header
onOpenPlanning={vi.fn()}
onResumePlanning={onResumePlanning}
activePlanningSessionCount={3}
/>
);
fireEvent.click(screen.getByTitle("More header actions"));
const planningButton = screen.getByTestId("overflow-planning-btn");
const iconWrapper = planningButton.querySelector(".mobile-overflow-icon-wrapper");
expect(iconWrapper).toBeTruthy();
const badge = screen.getByTestId("overflow-planning-badge");
expect(iconWrapper?.contains(badge)).toBe(true);
expect(planningButton.textContent).toContain("Resume planning session (3)");
fireEvent.click(planningButton);
expect(onResumePlanning).toHaveBeenCalledOnce();
});
it("closes overflow menu after selecting an action", () => {
const onOpenSettings = vi.fn();
render(<Header onOpenSettings={onOpenSettings} />);

29
packages/dashboard/app/components/__tests__/MailboxModal.test.tsx
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;");
});