Skip to content

Commit dbd4809

Browse files
pmaxhoganclaude
andauthored
fix(ui): add cursor pointer to buttons and link-buttons (#136)
## Summary Every interactive control in `ui/src` is a native `<button>` (this includes tab headers, icon buttons, and buttons styled to look like links) - Tailwind v3+ dropped the preflight `cursor: pointer` reset for buttons, so they were all falling back to the browser's default arrow cursor on hover. ## Approach Global rule, not per-component: one addition to `ui/src/style.css`'s `@layer base`: ```css button:not(:disabled) { cursor: pointer; } ``` `:not(:disabled)` keeps disabled buttons on the existing `disabled:cursor-not-allowed` Tailwind utility already present on the shared button-class constants (`primaryButtonClasses` / `secondaryBtn` / `destructiveBtn` etc. across `AccountList.vue`, `SourceTable.vue`, `Restore.vue`, `About.vue`, `Activity.vue`, `SetupWizard.vue`, ...) - both layers cascade correctly since Tailwind's `utilities` layer always wins over `base` regardless of source order/specificity. No per-component changes were needed: a full sweep of `ui/src` found no `@click` handlers, `role="button"`, or `tabindex` outside of native `<button>` elements, and the app's only other clickable-looking control (`RouterLink`, which renders `<a href>`) already gets a pointer cursor from the browser's default UA stylesheet. `<select>` and checkbox/toggle inputs were left alone - out of scope (native controls, not reported). ## Verification - `pnpm -C ui lint` - clean (only pre-existing i18n unused-key warnings, 0 errors) - `pnpm -C ui test:unit` - 264/265 passing; `router-first-run.test.ts`'s "lands a fresh install on the setup wizard" case timed out under full-suite load but passes cleanly in isolation (pre-existing flake, unrelated to a CSS-only change) - `pnpm -C ui build` (`vue-tsc --noEmit && vite build`) - clean; confirmed compiled CSS contains `button:not(:disabled){cursor:pointer}` - Ran the real dev server and drove it via `claude-in-chrome`, checking `getComputedStyle(...).cursor` on every `<button>` across Activity, About, Restore, and Setup Wizard: every enabled button reports `pointer`, every disabled button keeps its prior cursor (`not-allowed` via the existing utility, or the browser's disabled `default` where no utility applies) - zero regressions, zero visual changes beyond the cursor. Refs #34 --- Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QZQVP2tUuTLh8oL31D8heC
1 parent 232fd8f commit dbd4809

1 file changed

Lines changed: 12 additions & 0 deletions

File tree

ui/src/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,16 @@
5454
input[type="radio"] {
5555
@apply accent-teal-600;
5656
}
57+
58+
/*
59+
* Tailwind v3+ dropped the old preflight `cursor: pointer` reset for
60+
* buttons, so every <button> in the app (every button/link-button, tab
61+
* header, and icon button here is a native <button>) fell back to the
62+
* browser's default arrow cursor on hover. One global rule fixes all of
63+
* them; :not(:disabled) keeps disabled buttons on their existing
64+
* `disabled:cursor-not-allowed` utility instead of fighting it.
65+
*/
66+
button:not(:disabled) {
67+
cursor: pointer;
68+
}
5769
}

0 commit comments

Comments
 (0)