Replace expand-on-hover icon buttons with fixed-width buttons + tooltips#37
Open
do4k wants to merge 1 commit into
Open
Replace expand-on-hover icon buttons with fixed-width buttons + tooltips#37do4k wants to merge 1 commit into
do4k wants to merge 1 commit into
Conversation
👷 Deploy request for fancygist pending review.Visit the deploys page to approve it
|
The previous hover behavior animated button widths to reveal labels, causing layout shift that pushed neighboring buttons out of position. Buttons are now fixed 36px icons with tooltip labels shown below on hover, following standard toolbar conventions (VS Code, Figma, etc.). Co-authored-by: Claude <noreply@anthropic.com>
do4k
force-pushed
the
feature/ux-action-accessibility
branch
from
77d9024 to
c4cb1a1
Compare
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
aria-labelattributes on all icon buttons for screen reader accessibilityProblem
The previous
IconButtoncomponent animated its width via a Framer Motion spring to reveal a text label on hover. Because buttons are in a flex container withgap-2, expanding one button shifted all siblings to the right. Hovering "About FancyGist" (the widest label) displaced "File" entirely, making it impossible to click without the target moving.Solution
Tooltipcomponent (src/components/Tooltip.tsx) -- a reusable tooltip that appears below the trigger after a 400ms delay, with Framer Motion fade animation and automatic horizontal nudging to stay within the viewport.IconButton-- removed all width animation, label measurement,forceExpanded, and hover state logic. Now a static 36x36px circle button wrapped in<Tooltip>.SplitDownloadButton-- same treatment; the split button (download icon + chevron) is now fixed-width with a tooltip.forceExpandedprop from the File menu trigger.This follows standard toolbar UX conventions used by VS Code, Figma, Slack, and similar tools.