a11y(1.4.10): activity-options drawer — make width responsive so it reflows at 320 px

[canvanooo]

Description & motivation 💭

The Holocene <Drawer> primitive's default (w-screen sm:max-w-fit) reflows correctly at narrow viewports. The activity-options drawer at src/lib/components/activity/activity-options-update-drawer.svelte:126 passed class="w-[480px]", which tailwind-merge resolved over the primitive's w-screen because the consumer's className is the later argument and both belong to the width conflict group. Result: drawer was 480 CSS px wide at every viewport width.

At a 320 CSS px viewport (the WCAG 2.2 reflow threshold — small phone in portrait), the drawer is right-0 anchored, so the 480 px width pushed its left edge 160 px off the viewport's left side. That triggered horizontal page scroll, violating SC 1.4.10 Reflow.

This PR swaps the consumer's class to the two-breakpoint form w-screen sm:w-[480px]. w-screen and sm:w-[480px] are in different responsive groups, so they coexist cleanly: drawer is full-width below sm: (< 640 px) and 480 px at sm: and above, matching the original desktop intent.

The diff:

- class="w-[480px]"
+ class="w-screen sm:w-[480px]"

One line in src/lib/components/activity/activity-options-update-drawer.svelte:126.

Other Drawer consumers verified safe (no parallel fix needed):

Consumer	Width prop	Status
workflow/configurable-table-headers-drawer/index.svelte:44	w-[35vw] min-w-min max-w-fit	Pass — viewport-relative
workers/serverless-worker-form/setup-guide-toggle.svelte:25	None	Pass — inherits primitive
event/event-shortcut-keys.svelte:25	None	Pass — inherits primitive
activity/activity-options-update-drawer.svelte:126	w-[480px]	Defect this PR fixes

The primitive does not change.

Screenshots (if applicable) 📸

Screenshots to be captured by the PR author from the Vercel preview build (link appears once the Vercel check passes). Include light-mode and dark-mode captures for each affected primitive.

Design Considerations 🎨

No visual change on desktop. Behavior change only at small viewports (< 640 px wide), where the drawer now fills the available width instead of extending off-screen. If the design team has an explicit preference for how drawer content should reflow on small screens (e.g., a different layout for the inner form), that's a follow-up — this PR closes the WCAG 1.4.10 failure without changing the form structure inside the drawer.

Testing 🧪

How was this tested 👻

• Manual testing
• E2E tests added
• Unit tests added

Automated checks performed locally on a11y/1.4.10-activity-options-drawer-reflow before pushing:

• pnpm lint — 0 errors (148 pre-existing warnings, none on the touched file)
• pnpm check (svelte-check) — 0 errors (84 pre-existing warnings, none on the touched file)
• pnpm test -- --run — 142 test files / 2023 tests pass
• Pre-commit lint hooks (lint-staged: eslint --fix, prettier --write, stylelint --fix) clean

Manual visual testing in DevTools device mode is the responsibility of the PR author after the preview deploy is ready (see "Steps for others to test" below).

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

1. Check out the branch and pnpm install if needed.
2. pnpm dev — open Chrome DevTools, toggle device mode, set viewport to 320 × 568 portrait.
3. Authenticate, navigate to a namespace with a workflow that has a pending activity (the demo workflow at examples/a11y-badge-demo/ in the audit workspace produces one).
4. Scroll to the Pending Activities section. Open the activity-options drawer (the "Update activity options" action on the pending activity).
5. Confirm: drawer opens flush with the right edge of the viewport, fills the full 320 px width, no horizontal page scroll.
6. In DevTools console: document.body.scrollWidth === document.body.clientWidth should return true.
7. Close the drawer. Resize the viewport to 640 × 800 (the sm: breakpoint). Re-open the drawer. Confirm: drawer is now 480 px wide.
8. Resize to 1280 × 800 desktop. Re-open the drawer. Confirm: drawer is 480 px wide (visual identical to pre-fix behavior).
9. Slowly drag the viewport from 320 → 1280 with the drawer open. Confirm: width transitions cleanly at 640 px; no flicker, no layout shift, no horizontal scroll at any width.
10. Tab through the form inside the drawer. Confirm focus order is unchanged.
11. Cross-browser: confirm the fix in both Chromium and Firefox.

Checklists

Draft Checklist

• One-line diff verified in src/lib/components/activity/activity-options-update-drawer.svelte:126
• Other Drawer consumers audited and confirmed not defective (table above)
• Local pnpm lint, pnpm check, pnpm test -- --run all pass

Merge Checklist

• PR author has walked the DevTools 320 px sweep above
• document.body.scrollWidth === document.body.clientWidth confirmed at 320 px viewport
• Cross-browser parity (Chromium + Firefox)
• CLA status green

Issue(s) closed

A11y-Audit-Ref: 1.4.10-activity-options-drawer-width

Closes the activity-options drawer reflow defect documented in the May 2026 audit (manifest bucket 1, severity serious, scope ui-main). See scripts/a11y/manifest.yml for the canonical entry.

Docs

Any docs updates needed?

No external docs (docs.temporal.io) need updating — this is a consumer-side CSS class change with no API surface change.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	May 29, 2026 3:47pm

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[temporal-cicd]

Warnings

⚠️

📊 Strict Mode: 4 errors in 1 file (0.4% of 898 total) src/lib/components/activity/activity-options-update-drawer.svelte (4) L109:82: Property 'message' does not exist on type '{}'. L163:15: Type 'number | null | undefined' is not assignable to type 'number'. L204:15: Type 'number | null | undefined' is not assignable to type 'number'. L283:13: Type '{ id: string; label: string; labelHidden: true; value: string | null | undefined; class: string; }' is not assignable to type '__sveltets_2_PropsWithChildren<$$Props, { 'before-input': { disabled: boolean; }; 'after-input': { disabled: boolean; }; }> | undefined'.

Generated by 🚫 dangerJS against 1fbdfd0

[canvanooo]

Verified locally.