Original task: on phones and iPad the per-card action row (color,
label, send, archive, delete) was hidden by `opacity-0
group-hover:opacity-100`. Touch devices have no hover, so users
couldn't send a freshly-created note (or change its color, label,
archive it).
Changes
- artifacts/tx-os/src/pages/notes.tsx
- Add Tailwind v4 arbitrary variant `[@media(hover:none)]:opacity-100`
to the per-card action row so it stays always-visible on touch
devices while desktops keep the existing hover-reveal behaviour.
- Apply the same variant to the unpinned pin button (which uses the
identical hover-only treatment).
Tests
- artifacts/tx-os/tests/notes-card-touch-actions.spec.mjs (new)
- Uses `test.use({ hasTouch: true, isMobile: true, viewport })` on
chromium (webkit isn't installed) so the page reports
`(hover: none)`. Sanity-checks that via matchMedia, then creates a
note via the composer (tap-outside auto-save) and asserts both
that the Send button is visible and that the action row's
computed opacity is exactly 1 — Playwright's `toBeVisible` alone
doesn't catch opacity-0.
Verification
- pnpm --filter @workspace/tx-os exec tsc --noEmit: clean.
- pnpm --filter @workspace/tx-os test:e2e -- notes-delete-confirm
notes-card-touch-actions: 3 passed (touch test + the two
delete-confirm specs from #423 to confirm no regression).
- Architect code review: no severe issues. Desktop hover-reveal is
preserved because `(hover: none)` doesn't match on pointer devices.
Out of scope (per task plan): the trash button inside the
manage-labels dialog (different surface, dialog-only).
riyadhafraa