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

packages/dashboard/app/components/Header.tsx

@@ -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 && (