Part of Epic #3351 — mobile client support (iOS + Android via Tauri 2).

Problem

The LibreFang dashboard (crates/librefang-api/dashboard/) is built for desktop screens. Concrete pain points when rendered on a phone-sized viewport (verified by resizing Chrome to 390 × 844):

• Sidebar is permanent and fixed-width (~240px), eating most of the horizontal space; on phones it should collapse to a hamburger drawer.
• Several pages (Skills, Workflows, Agents) use multi-column tables with min-width: 1280px assumptions; columns clip or scroll horizontally with no table-to-card fallback.
• Tap targets in some action menus are <44 × 44 CSS pt (Apple HIG floor) or <48 × 48 dp (Material guideline).
• Modal dialogs are sized in fixed px and overflow viewport on small phones.
• Forms with a large number of inputs (agent config, channel config) don't account for the iOS / Android virtual keyboard pushing content; the submit button ends up under the keyboard.
• The chat view's message-input textarea doesn't grow with content on mobile and has no obvious "send" button when the soft keyboard is up.

Approach

Touch-first responsive pass. The dashboard already uses Tailwind, so most of the work is adding sm: / md: / lg: breakpoint variants and replacing fixed min-w-* with responsive containers. No framework swap.

A few mobile-specific patterns to introduce:

1. Drawer navigation: hamburger toggle on < md, current sidebar on >= md. Use <dialog> or a small headless drawer primitive — avoid pulling in a heavy nav library.
2. Table → card collapse: at < md, render each row as a stacked card with the column header as the label. New helper <ResponsiveTable> to keep this DRY across Skills / Workflows / Agents pages.
3. Sticky action bar: forms with a save button get a position: sticky; bottom: 0 action bar so the button is reachable above the soft keyboard.
4. Safe-area insets: respect env(safe-area-inset-*) on iOS notch / Android nav bar — apply via a root-level CSS shim, not per-component.
5. Tap target audit: every interactive element ≥ 44 × 44 CSS pt. Add an ESLint or Tailwind plugin lint pass if practical, otherwise a manual sweep.
6. Viewport meta: confirm <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> is in index.html — required for safe-area support.

Out of scope: native gestures (swipe-to-dismiss, pull-to-refresh). Treat as follow-ups if the basic touch pass doesn't suffice.

Tasks

1. Audit pass: open every dashboard route on a 390×844 viewport in Chrome devtools, screenshot the broken ones, attach to this issue.
2. Add Tailwind responsive variants to fix each page in the audit.
3. Add <DashboardShell> drawer behavior (hamburger on < md).
4. Add <ResponsiveTable> wrapper and migrate Skills / Workflows / Agents / Approvals tables.
5. Sticky-action-bar component for the multi-input forms.
6. Safe-area inset CSS shim.
7. Manual pass on iOS Simulator (after Scaffold Tauri iOS/Android targets in librefang-desktop #3342 lands) and Android emulator: open every page, verify no clipped controls, no overflow, soft keyboard doesn't bury submit buttons.

Acceptance criteria

• At 390 × 844 viewport: every page from the audit renders without horizontal scroll and without clipped interactive elements.
• Sidebar collapses to a hamburger drawer below the md breakpoint.
• Skills / Workflows / Agents / Approvals tables render as stacked cards on small viewports.
• Forms with > 5 inputs have a sticky action bar; submit is visible with the soft keyboard up.
• Safe-area insets respected on iOS Simulator (notch device) and Android emulator (gesture nav).
• No tap target smaller than 44 × 44 CSS pt found in a manual sweep.
• Desktop layouts unchanged — verify with side-by-side screenshots before/after on >= 1280px.

This issue runs in parallel with #3344 once #3342 has landed.