easterbrooka makes the Create button stop lying

A small UX fix with an outsized payoff: users now know why they can't click Create.

chat-uiworkflow

On Mike's new-review and new-workflow modals, the name field at the top is styled like an ornamental heading rather than an input. Users skip past it, then stare at a greyed-out Create button and assume the app is broken. easterbrooka's fix: hover the disabled button and a tooltip tells you what's missing.

The team iterated three times to land it - first with the browser's built-in tooltip, then switching to Radix (a popular toolkit for accessible UI primitives) once they hit the well-known quirk that disabled buttons don't reliably fire hover events. The final version is clean enough that upstream Mike could pick it up wholesale; the same modals have the same trap.

So what Anyone shipping legal tools on top of Mike should watch this one - it's the kind of two-line polish that quietly raises a product's perceived quality.

View this fork on GitHub →

Spotted something wrong? Or know the PR text has fresher detail than the writeup above?

Commits in this thread

3 commits from easterbrooka/mike, oldest first. Source extracted verbatim from the harvested git log.

SHA	Subject	Author	Date
`12ed2644`	Add hover tooltip explaining why Create button is disabled	andrew	2026-05-05	↗ GitHub
commit body The Review name field at the top of the New Tabular Review modal is visually subtle (large serif text input that looks like a heading), so users can miss it and assume the disabled Create button is broken. Add a native title attribute that surfaces the gating reason on hover. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`a1c8bd1e`	Add hover tooltip on disabled Create workflow button	andrew	2026-05-05	↗ GitHub
commit body Same UX problem as the tabular review modal: the Title field is a large serif input that looks ornamental, and users assume the disabled button is broken. Native title attribute surfaces the gating reason on hover. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`766d170d`	Use Radix tooltip for disabled Create buttons	andrew	2026-05-05	↗ GitHub
commit body Native title-attr tooltips don't reliably fire on disabled <button> elements (browser-dependent). Switch to @radix-ui/react-tooltip with a span wrapper around the disabled button so hover events are captured. - Add @radix-ui/react-tooltip dep - Add components/ui/tooltip.tsx (shadcn-style wrappers) - Wrap the disabled Create button in AddNewTRModal and NewWorkflowModal - Switch Amplify build from npm ci to npm install (committed amplify.yml at repo root) so adding deps doesn't require regenerating the lockfile Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Capture this thread into my fork

Download a single Markdown prompt that tells Claude how to port every commit above into your working tree — adapting paths and structure to match your repo. Run it via claude -p < capture-thread-56.md from inside the repo you want the changes in.

⬇ Download capture-thread-56.md