Skip to content

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

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Should fix before soft launchbugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions