Repository navigation
fix(ui): narrow-window wrapping, reduced motion, dialog focus and Pi click animation - #160
Merged
Merged
Conversation
With 17 agents the welcome row is 908px wide, wider than the desktop window's 900px minimum, so both ends were cut off. The row now keeps a single line while the viewport leaves 40px on each side and otherwise splits into two even rows (9 + 8), computed from AGENT_ORDER so new agents need no further change. Icons stay 44px. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The Extensions filter bar, the Extensions header and the Marketplace header sit above their scroll containers, so whatever did not fit was clipped off the right edge with no way to reach it (unlike the lists below, which scroll). They now wrap: the dropdowns and search box move to their own right-aligned line, and the header buttons keep their labels on one line instead of breaking mid-text before overflowing. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The reduced-motion block in mascot.css lists every mascot, but its `.mascot-x.is-clicked *` selectors lose to the per-part animation rules such as `.mascot-pi.is-clicked .pi-depth`, so with "Reduce motion" on the hover and click animations played anyway (83 of them across the 17 mascots). Both declarations now carry `!important`. Only static state changes remain on click (Gemini's glow, Cursor's shadow), which is not motion. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The Audit page carried its own copy of the hook-name shortening that extensionDisplayName already implements; the output is identical. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The two update dialogs declared aria-modal but let Tab wander behind the backdrop and ignored Escape; the shared Modal already handles both through useFocusTrap and useEscape. They now use the same hooks, keeping their own markup because the plain backdrop is what lets the window be dragged from it. Escape behaves like the header ✕. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Clicking the Pi card now plays the game of Tetris from pi.dev's hero, cell for cell and frame for frame: the π vanishes, the turquoise bar, blue leg, coral bar and yellow leg fall in one after another, the yellow leg completes the bottom row, which flashes three times and is cleared, and the rest settles one cell down into the π. Upstream runs 18 fps with seven eased frames per piece, so every track is step-end on one 3s clock. The old slide-together-and-puff click is gone with its smoke. The tail of each track eases from the settled π into the hover resting offset with the hover's own curve and stagger, so a click while hovering ends with the blocks picked up again gradually. The agent card clips the mascot at the card's top edge so the pieces fall in from it. Co-Authored-By: Claude Fable 5.1 <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
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.
Six small frontend fixes, one commit each.
AGENT_ORDER, icons stay 44px.prefers-reduced-motionblock lost to the more specific per-part animation rules, so every hover and click animation still played with the setting on. Both declarations now carry!important. Verified with the media feature emulated: 83 live animations before, 0 after.extensionDisplayNameinstead of its own copy of the hook-name shortening. No output change.useFocusTrap/useEscapehooks, like the shared Modal already does. Tests added for both.Checked at 1280 / 988 / 900 / 760 / 560 px, light and dark theme.
🤖 Generated with Claude Code