fix: emoji picker and page icon design spec violations (#186)

[zacharias-ona]

Closes #186

What

The emoji picker and page icon components introduced in PR #185 had four design spec violations: emoji buttons and page icon buttons had touch targets below the 44px mobile minimum, the filter input was missing its border and focus ring, the "Add icon" button was invisible on mobile (hover-only opacity), and the emoji picker clipped on narrow mobile viewports.

How

Applied responsive Tailwind classes to enforce 44px minimum touch targets on mobile while preserving desktop sizes. Added border border-white/[0.06] and focus:ring-2 focus:ring-ring to the filter input per the input spec. Made the "Add icon" button visible on mobile with max-sm:opacity-100. Changed the picker width from fixed w-72 to w-[calc(100vw-16px)] sm:w-72 so it fits within narrow viewports.

Testing

Added 7 static analysis regression tests in src/components/emoji-picker-design-spec.test.ts that verify:

• Emoji buttons have 44px minimum touch targets
• Filter input has border and focus ring classes
• Picker uses responsive width to avoid mobile clipping
• Page icon button has 44px minimum touch targets
• "Add icon" button is visible on mobile (not hover-only)

All 220 tests pass. Lint and typecheck clean.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	Apr 17, 2026 6:57pm

[zacharias-ona]

[ci-fix] This PR has failed CI 3+ times. Needs human investigation.

Root cause: The staging job (supabase db reset --linked --yes) fails because the migration 20260417165531_create_page_images_bucket.sql on this branch uses a non-idempotent INSERT — the page-images bucket already exists in the staging Supabase project.

This branch has the old version of the migration (plain INSERT and CREATE POLICY without conflict handling). main was updated in 5b88785 to use ON CONFLICT (id) DO NOTHING and DO $$ BEGIN ... EXCEPTION WHEN duplicate_object wrappers.

Fix: Rebase the branch onto current main, or update supabase/migrations/20260417165531_create_page_images_bucket.sql on this branch to match the idempotent version on main.

[zacharias-ona]

[shepherd:conflict] Rebased on main but checks fail. The rebase resolves the merge conflict in src/components/page-icon.tsx (additive — mobile visibility classes), but a design spec test added on main (src/components/page-icon-design-spec.test.ts from issue #191) asserts that the hover-reveal wrapper must NOT use transition-opacity. This PR intentionally adds transition-opacity for the mobile visibility fix.

This is a genuine semantic conflict between two design decisions:

• Issue bug: UI does not match design spec after PR #189 #191 (on main): "Hover states: no transition (instant)" — enforced by the test
• Issue bug: UI does not match design spec after PR #185 #186 (this PR): Adds transition-opacity for smooth mobile visibility

A human needs to decide which behavior is correct, or update the test to allow transition-opacity on mobile.

Conflicting files: src/components/page-icon.tsx, src/components/page-icon-design-spec.test.ts

[zacharias-ona]

Review: 1 blocking issue found

The PR correctly addresses all four violations from issue #186 — touch targets, input styling, mobile visibility, and responsive picker width.

Blocking:

1. Emoji grid overflows on mobile: The grid remains grid-cols-8 but emoji buttons now have min-w-[44px]. On a 375px viewport, 8 × 44px exceeds the available picker width. The grid needs responsive columns (e.g., grid-cols-6 sm:grid-cols-8). See inline comment.

Pushing a fix for this now.

[zacharias-ona]

⚠️ UI verification found design spec violations. See #201.

Static analysis: 3 instances of arbitrary spacing values (min-h-[44px], min-w-[44px]) where Tailwind scale equivalents exist (min-h-11, min-w-11). The design spec prohibits arbitrary spacing when a scale class matches.

Visual verification: ✅ No visual regressions. Emoji picker renders correctly on desktop (8-col grid) and mobile (6-col grid, full-width). Filter input has border and focus ring. "Add icon" button visible on mobile. Touch targets adequate. No clipping or overflow.

[zacharias-ona]

✅ Post-merge verification passed.

E2E suite: 46/47 passed. The 1 failure (search with no matches shows empty state) is a known pre-existing issue (#144), unrelated to this PR's emoji picker/page icon changes.

Ad-hoc smoke tests (all passed):

• Landing page — loaded, title present
• /sign-in — rendered with email input
• /api/health — healthy
• Authenticated flow — login succeeded, workspace loaded
• No console errors (unauthenticated or authenticated)

Skipped:

• /dashboard (not yet built)
• Editor page navigation (no page buttons found in test workspace)