got-feedBack/feedBack
1
0
Fork 0
mirror of https://github.com/got-feedBack/feedBack.git synced 2026-08-11 03:09:57 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(a11y): app-wide "Interface size" setting (Accessibility) (#664)

Browse Source 
* feat(a11y): app-wide "Interface size" setting (Accessibility)

Adds a dedicated Accessibility -> Interface size control so users on large,
low-DPI displays can enlarge the app's menus, buttons and text (reported: eye
strain on a 32" 1440p panel with no OS scaling).

Mechanism: a host-owned scale capability (window.feedBack.scale) applies a
RELATIVE root font-size (a % of the user-agent base, never a px literal, so a
raised browser/OS base font is respected) and publishes an always-present
--fb-scale token. The rem-based v3 chrome scales together; the gameplay highway
canvas (device-pixel sized) is deliberately untouched, so playback resolution
and FPS are unchanged. Medium (100%) clears the override, so default rendering
is byte-identical to before -- zero blast radius.

- Settings -> new Accessibility tab: Small/Medium/Large/Extra-Large presets
  (0.90/1.00/1.15/1.30) + a fine-tune slider (to 150%).
- Applied pre-paint from an inline <head> script (mirrors the ss-follower
  pattern) so there is no flash-of-reflow on load.
- window.feedBack.scale read-API (get/set + scale:changed, fires once on load)
  so canvas/WebGL surfaces that cannot inherit rem can follow the size. Shape
  mirrors the working-tuning read-API; persists as a durable preference.
- Cosmetic px->rem sweep so text scales cleanly at the larger stops (2 v3.css
  font-sizes + 20 text-[Npx] utilities across 8 v3 files; tailwind.min.css
  rebuilt byte-stable via the pinned toolchain).
- One-time first-run nudge for the large/low-DPI display profile that deep-links
  to the control (never fires once the setting is touched, or on other displays).

v3-only. Verified headless: core apply/persist/reset/reload/UI-sync + nudge
gating, with no console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QbexxfTt8q2tAn436MqGWF

* fix(v3): regenerate tailwind.min.css to satisfy tailwind-fresh CI (PR #664 review)

Regenerate static/tailwind.min.css via scripts/build-tailwind.sh
(tailwindcss@3.4.19) so a fresh build matches the committed artifact and
the tailwind-fresh CI job's `git diff --quiet` passes. Two consecutive
regenerations are byte-identical.

Also (Fix 2) switch the fine-tune interface-size slider to the documented
transient-preview path: oninput now calls scale.set(v, { persist:false })
so dragging previews without writing localStorage/emitting a commit each
tick, and a new onchange commits with persistence on release.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: byrongamatos <xasiklas@gmail.com>
This commit is contained in:
ChrisBeWithYou
2026-07-02 14:00:30 +02:00
committed by GitHub
co-authored by Claude Opus 4.8 byrongamatos
parent 15fabb62aa
commit 727b8c8f24
14 changed files with 386 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/v3/v3.css
+34 -2
View File
@@ -4,6 +4,12 @@
* `fb` palette in tailwind.config.js.
*/
/* Interface-size (Accessibility): the always-present UI-scale token. JS
(capabilities/interface-scale.js) overrides it on :root and drives the
visible scaling through the root font-size; this default keeps
`var(--fb-scale)` resolvable for any canvas/CSS consumer even when unset. */
:root { --fb-scale: 1; }
/* ── Text-selection policy (v3) ──────────────────────────────────────────────
Accidental drag/double-click selection of app chrome (sidebar, transport, the
note highway/HUD, buttons, labels) makes the UI look broken and is never
@@ -604,7 +610,7 @@ html[data-scoreboard="off"] #v3-live-performance-hud { display: none !important;
align-items: center;
justify-content: center;
z-index: 1;
font-size: 32px;
font-size: 2rem;
line-height: 1;
}
#v3-player-rail .section-practice-control--v3 .section-practice-pill-icon .v3-rail-svg,
@@ -877,7 +883,7 @@ html[data-scoreboard="off"] #v3-live-performance-hud { display: none !important;
padding: 0 4px;
display: flex; align-items: center; justify-content: center;
background: #22d3ee; color: #0f172a;
font-size: 10px; font-weight: 800; line-height: 1;
font-size: 0.625rem; font-weight: 800; line-height: 1;
border-radius: 999px; z-index: 2;
}
.v3-rail-badge[hidden] { display: none; }
@@ -1119,6 +1125,32 @@ body.font-display { font-family: Rubik, system-ui, sans-serif; }
.fb-srow-stack .fb-srow-control input[type="text"] { flex: 1 1 auto; min-width: 0; }
.fb-srow-wide { width: 100%; }
/* Segmented control + fine-tune (Accessibility → Interface size) */
.fb-seg {
display: inline-flex; flex-wrap: wrap; gap: .25rem;
background: #0f172a; border: 1px solid rgba(51, 65, 85, .55);
border-radius: .7rem; padding: .3rem;
}
.fb-seg-btn {
appearance: none; border: none; cursor: pointer;
padding: .5rem .9rem; min-height: 2rem; border-radius: .5rem;
font-size: .82rem; font-weight: 600; color: #94a3b8; background: transparent;
transition: background .15s, color .15s;
}
.fb-seg-btn:hover { color: #e2e8f0; }
.fb-seg-btn.active { background: #0ea5e9; color: #04263a; }
.fb-seg-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.fb-finetune { margin-top: .6rem; }
.fb-finetune > summary {
font-size: .78rem; font-weight: 600; color: #94a3b8; cursor: pointer;
list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
.fb-finetune > summary::-webkit-details-marker { display: none; }
.fb-finetune > summary::before { content: "\25B8"; font-size: .7rem; transition: transform .15s; }
.fb-finetune[open] > summary::before { transform: rotate(90deg); }
.fb-finetune-body { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.fb-seg-val { font-size: .8rem; color: #94a3b8; min-width: 3rem; text-align: right; }
/* Toggle switch */
.fb-switch { position: relative; display: inline-block; width: 2.6rem; height: 1.5rem; flex: none; }
.fb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }