feat(ui): add UI size setting for larger touch-friendly controls#41
Open
eugenioenko wants to merge 1 commit into
Open
feat(ui): add UI size setting for larger touch-friendly controls#41eugenioenko wants to merge 1 commit into
eugenioenko wants to merge 1 commit into
Conversation
Add a "UI size" setting (Default / Large) to the Settings tab. Large mode scales interactive controls to ~44px (the iOS HIG / WCAG 2.2 AAA touch-target minimum) without touching text, layout spacing, or the rest of the chrome. Mechanic - `uiSize: "default" | "large"` in useOptionsStore, persisted (v6). - App-level effect writes data-ui-size onto <body>. - CSS variables in :root carry the base sizes; a body[data-ui-size="large"] block overrides them. All affected components read the vars. Scope - ButtonGroup min-height tracks --ctrl-h; items-center keeps children vertically aligned at any container height. - ToggleButton honours its className prop (was silently dropped). - SlideInput wrapper uses a .slide-input-wrapper class with width and max-width from vars; icon buttons and their Tabler icons use --ctrl-icon-btn and --ctrl-icon. - ColorInput swatch / alpha button / percent icon all var-driven; the swatch size matches --ctrl-h at large so it fills the left pad with no inset, and keeps its 18px look with a 4px inset at default. - Toolbar tool buttons (single and ToolGroup) get a .toolbar-btn class that forces 44x44 at large and auto (natural p-1 + 24px icon) at default. - Top navbar height moves to var(--nav-h): 48px default, 56px at large. - Tool-options SlideInputs dropped their per-call max-w-24; the new --slider-input-max-w inside the primitive caps them consistently. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
useOptionsStore(v6).document.body.dataset.uiSize; abody[data-ui-size="large"]block inindex.cssoverrides the:rootCSS variables that every affected primitive reads.What scales
--ctrl-h;items-centerkeeps children aligned at any container height.--ctrl-icon-btn), and Tabler icons inside them (--ctrl-icon)..toolbar-btnclass that forces 44×44 at large,autoat default (unchanged look).--nav-h: 48px default → 56px at large.What doesn't scale
Body text, tooltips, labels, section titles, panel width, color palette, canvas handles, status bar — all unchanged. Scope was intentionally limited to the interactive primitives that hurt with a finger.
Other
ToggleButtonnow honours itsclassNameprop (was silently dropped).max-w-24on each SlideInput; the new--slider-input-max-winside the primitive caps them consistently for both scopes.version: 6).Test plan
🤖 Generated with Claude Code