fix(web): make audited layouts and controls mobile-safe

[jeanduplessis]

Problem

Fixed widths, nonwrapping toolbars, desktop-only rows, hidden mobile content, undersized controls, and missing safe-area handling break or degrade audited flows near 320–375px.

Remediation action

Add mobile-first reflow and touch-safe sizing to audited non-table layouts.

Representative scope

• apps/web/src/components/auth/AuthPageLayout.tsx:14
• apps/web/src/components/profile/ConnectedAccountsCard.tsx:73
• apps/web/src/components/organizations/OrganizationMembersCard.tsx:364
• apps/web/src/components/organizations/byok/BYOKKeysManager.tsx:475
• apps/web/src/components/app-builder/AppBuilderPreview.tsx:167
• apps/web/src/app/(app)/claw/kilo-chat/components/KiloChatLayout.tsx:236
• apps/web/src/components/gastown/DrawerStack.tsx:47
• apps/web/src/components/gastown/MayorChat.tsx:92
• apps/web/src/app/(app)/wasteland/by-id/[wastelandId]/wanted/WantedBoardClient.tsx:440
• apps/web/src/app/admin/components/AdminPage.tsx:40
• apps/web/src/app/layout.tsx:96

Acceptance criteria

• Forms, headers, action groups, sidebars, drawers, boards, and toolbars reflow without page-level overflow at 320, 375, 768–1024, and 1440px.
• Important content is reshaped rather than hidden on mobile.
• Touch-facing controls provide at least 44px hit targets while retaining compact visual rhythm.
• Mobile navigation reuses Sidebar/Sheet behavior.
• Fixed top/bottom surfaces honor safe-area insets and root viewport uses viewportFit: cover.
• Long emails, identifiers, plan names, and translated labels wrap or truncate deliberately.