fix(design): replace the tape's independent scroll with an ambient auto-ticker - #62
Merged
Conversation
…to-ticker
The operator flagged "2 columns with their own scrollbars?" — real: the
transcript sidebar had overflow-y:auto over ~3835px of content (124 lines,
~3x the viewport), an independent nested scroll region the ui-ux-pro-max
skill's own checklist calls out as an anti-pattern ("avoid nested scroll
regions that interfere with the main scroll experience"). Most visitors
would never discover ~2/3 of that content existed.
Replaced with a self-playing marquee (duplicate content, translateY loop,
150s per pass, pauses on hover) — no manual scroll surface at all. This
also better matches the "— live" label than a static scrollable list did.
Respects the project's existing global prefers-reduced-motion rule (no
per-component override needed). Fade-mask isolated to the scrolling
viewport only, not the static header label, after a first pass partially
faded the header itself.
Independent-run touch-target audit (ui-ux-pro-max §2, 44x44 minimum)
against the live site surfaced 2 more real bugs: the new Header.astro nav
links (this session's own work) had ~20px tap height; separately,
examples/demo/index.html's footer links and Arena CTA never got the same
44px treatment landing's Footer.astro already had — a pre-existing gap.
Fixed all three.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016hYVVizgvJ4wZBug9XTjVG
(cherry picked from commit b93a96827c2743bb2e4899f69b5ba09106da68bd)
4 tasks
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
overflow-y:autoover ~3835px of content (124 lines, ~3x the viewport) — an independent nested scroll region alongside the main page scroll. Most visitors would never discover ~2/3 of that content existed. Replaced with a self-playing marquee (duplicate content,translateYloop, 150s/pass, pauses on hover) — no manual scroll surface at all, and better matches the "— live" label than a static scrollable list did.Header.astronav links (added in feat(design): shared Header component with real nav across every page #61) had ~20px tap height; separately,examples/demo/index.html's footer links and Arena CTA never got the same 44px treatment landing'sFooter.astroalready had.Test plan
prefers-reduced-motionrulescripts/flip-audit.shpassed🤖 Generated with Claude Code
https://claude.ai/code/session_016hYVVizgvJ4wZBug9XTjVG