# W16 — Gate 7: Responsive Audit (ticket #3239, oms-web)

Branch: `bug/3239-the-logout-confirmation-`
Date: 2026-08-27
Gate agent: `gates/nextjs-tailwind-standalone/responsive-audit-gate.md`

## Skill resolution (gate "Skill resolution", steps 1–4)

All six audits were attempted through the full resolution order. **None resolved.**

| Skill | 1. `/nextjs-tailwind-<name>` | 2. `/<name>` | 3. `read_file(.claude/skills/...)` | Used |
|---|---|---|---|---|
| responsive-components-audit | not registered | not registered | file absent | none |
| responsive-desktop-audit | not registered | not registered | file absent | none |
| responsive-mobile-audit | not registered | not registered | file absent | none |
| responsive-tablet-breakpoint-audit | not registered | not registered | file absent | none |
| responsive-typography-audit | not registered | not registered | file absent | none |
| responsive-ux-consistency-audit | not registered | not registered | file absent | none |

Probed paths (all missing): `oms-web/.claude/skills/`, `cross-repo-orchestration/.claude/skills/`,
`/opt/drcarrot-deploy/.claude/skills/`, `/home/devops/.claude/skills/`. `oms-web` has no
`.claude/` directory at all. Per gate step 4 this is reported, not silently skipped: the six
audits were executed from the scope definitions in the gate file itself (lines 27–38), against
the real files, not from the (absent) skill texts.

## Other input gaps

- `screen_inventory` is `<missing>`. The `[ux-consistency]` audit's primary input — other screens
  to compare responsive behavior against — is therefore unavailable. Cross-screen comparison was
  reconstructed from the repo (`app/layout.tsx`, `components/layout/Sidebar.tsx`, the other
  `Modal` consumers) rather than from the inventory. Noted as a coverage limitation.
- No write access this run, so gate step 3 (auto-fix) could not be performed. Every finding is
  reported with `fixed: false`. Nothing was auto-fixed and nothing is claimed to be.
- Gate step 5 (Redmine PUT) was not executed — outward-facing mutation of an external ticket,
  outside this run's read-only mandate.

## Environment constraints on method

`headless_chromium: false`, so no rendered-viewport measurement was possible. This gate is
defined as a source/layout-logic review (gate file lines 20–22: rendered-screenshot verification
belongs to `ui-verify`), so findings below are derived from static analysis of the Tailwind class
sets plus the resolved theme, and geometry is computed from Tailwind's default scale.

## Commands actually run

```
npx vitest run tests/components-logout-button.test.tsx tests/components-sidebar.test.tsx
  → Test Files 2 passed (2) / Tests 11 passed (11)
```

Supporting greps: no `sm:`/`md:`/`lg:`/`xl:` prefix occurs anywhere in `app/` or `components/`
except `sm:text-sm` inside `.field-input`/`.field-control` in `app/globals.css`.
`tailwind.config.ts` defines no custom `screens`, so Tailwind defaults apply
(sm 640 / md 768 / lg 1024 / xl 1280).

## Files in scope

| File | Responsive surface |
|---|---|
| `components/ui/ConfirmModal.tsx` | yes — new generic confirm dialog |
| `components/ui/DeleteConfirmModal.tsx` | yes — now a thin delegate to ConfirmModal |
| `components/layout/LogoutButton.tsx` | yes — new sidebar trigger + dialog |
| `tests/components-sidebar.test.tsx` | none (test file) |
| `tests/components-logout-button.test.tsx` | none (test file) |
| `tests/setup.ts` | none (test harness) |

## Computed geometry (basis for the touch-target findings)

- `.btn` = `px-4 py-2 text-sm` → line-height 20px + 2×8px padding = **36px** tall
  (`btn-secondary` adds a 1px border each side → 38px).
- LogoutButton trigger = `px-2 py-1.5 text-sm` → 20px + 2×6px = **32px** tall (full-width).
- `Modal` close button = `p-1.5` around a `h-4 w-4` icon → **28×28px**.

All three clear WCAG 2.2 SC 2.5.8 *Target Size (Minimum)*, 24×24 CSS px — so this is **not** a
WCAG AA failure. All three fall below SC 2.5.5 *Enhanced* (44×44), Apple HIG 44pt and Material
48dp. Graded P2/P3 accordingly, not P1.

## Merged findings

See the JSON returned by the node. Summary: 0 P1, 3 P2, 4 P3.

### Scope note on F-01

`app/layout.tsx` composes `<Sidebar/>` (`w-64 shrink-0`, never collapses, no `md:` variant)
beside `<main className="flex-1 p-6">`. At a 375px viewport that leaves 375−256 = 119px for
`main`, and 71px of content width after `p-6` — the app shell is unusable below roughly the `md`
breakpoint. This is real and severe, but it is **pre-existing and app-wide**: neither
`app/layout.tsx` nor `Sidebar.tsx` is in this ticket's changed files, and nothing in the #3239
diff caused or worsened it. `LogoutButton` sits inside that sidebar at its fixed 256px width and
renders correctly there.

It is therefore recorded at P2 with `in_diff: false` and does **not** block Gate 7 for #3239.
Scoped to its own diff it would be P1. It should be raised as a separate ticket rather than
absorbed into this one.

## Gate result

**PASS** — zero unresolved P1 findings across the six audits, which is the gate's stated status
rule. The pass is qualified: six of six skill definitions were unreachable and `screen_inventory`
was missing, so audit coverage came from the gate's own scope lines rather than the skill texts.