diff --git a/openspec/changes/sidepanel-ux-improvements/tasks.md b/openspec/changes/sidepanel-ux-improvements/tasks.md index 499acb8..92912ac 100644 --- a/openspec/changes/sidepanel-ux-improvements/tasks.md +++ b/openspec/changes/sidepanel-ux-improvements/tasks.md @@ -19,7 +19,7 @@ ## 4. Adjustable font size -- [ ] 4.1 Add `A-` and `A+` buttons to the header in `sidepanel/sidepanel.html` before the `☰` button; style them like `#open-list` in `sidepanel/sidepanel.css` +- [x] 4.1 Add `A-` and `A+` buttons to the header in `sidepanel/sidepanel.html` before the `☰` button; style them like `#open-list` in `sidepanel/sidepanel.css` - [ ] 4.2 In `sidepanel/sidepanel.js`, implement font-size state: default 16px, range 10–24px, step 1px; apply via `editor.style.fontSize`; load from `localStorage` (`side-notes:fontSize`) at init and persist on every change - [ ] 4.3 Wire the two buttons to decrease/increase with clamping - [ ] 4.4 Add keyboard shortcuts in the existing keydown handler: `Ctrl/Cmd+=` (and `+` variant) increase, `Ctrl/Cmd+-` decrease, `Ctrl/Cmd+0` reset to 16px, all with `preventDefault()` diff --git a/sidepanel/sidepanel.css b/sidepanel/sidepanel.css index 3a0da46..bcfe3b5 100644 --- a/sidepanel/sidepanel.css +++ b/sidepanel/sidepanel.css @@ -142,22 +142,31 @@ html, body { font-size: 14px; } -#open-list { +#open-list, +#font-decrease, +#font-increase { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 2px 8px; cursor: pointer; - font-size: 14px; + font-size: 12px; line-height: 1; flex-shrink: 0; } -#open-list:hover { +#open-list:hover, +#font-decrease:hover, +#font-increase:hover { background: var(--border); } +#font-decrease, +#font-increase { + margin-left: 4px; +} + /* ---- Status bar ---- */ #status { padding: 4px 12px; diff --git a/sidepanel/sidepanel.html b/sidepanel/sidepanel.html index 44fe335..50cc37b 100644 --- a/sidepanel/sidepanel.html +++ b/sidepanel/sidepanel.html @@ -12,6 +12,8 @@ Loading… + +