Refactor HeaderCrop component to fix zoom functionality #1079
Conversation
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
Deploying ens-app-v3 with
|
| Latest commit: |
839c984
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://04d375b4.ens-app-v3.pages.dev |
| Branch Preview URL: | https://feature-fet-2590-app-v3-head.ens-app-v3.pages.dev |
…ode structure - Simplified HeaderCrop.tsx by removing custom hooks pattern and following AvatarCrop.tsx structure - Fixed zoom functionality that was previously broken due to infinite rerenders - Renamed avatar parameter to header for better semantic clarity - Updated HeaderCancelButton (previously AvCancelButton) and test IDs - Removed unnecessary error handling and complexity - All tests passing with proper 3:1 aspect ratio support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Alphabetize named imports from HeaderCrop to follow ESLint conventions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Change dialog title translation key from 'header.image.title' to 'avatar.image.title' to match the correct translation namespace. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…ning Added ImageCropGuides component with rule-of-thirds grid overlay: - Vertical lines at 1/3 intervals for horizontal composition - Horizontal lines at 25%/75% for 6:1 aspect ratio (25% 50% 25% distribution) - Semi-transparent accent-colored guides to assist with image cropping 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add AspectRatioLabel, OuterRatioLabel, and InnerRatioLabel styled components - Display 3:1 label for outer crop frame and 6:1 label for inner grid lines - Add tests to verify both aspect ratio labels are displayed - Labels positioned at top-right with semi-transparent background for visibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…normal Corrects type error in AspectRatioLabel styled component where theme.fontWeights.medium was used but doesn't exist in the theme. Valid fontWeights are: light, normal, bold, extraBold. Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…ignment Move the inner (6:1) aspect ratio label from top: 28% to top: 26% to position it closer to the horizontal guide line at 25%, improving the visual association between the label and its corresponding guide line. Tested across multiple screen sizes (800x600, 1920x1080) to ensure consistent positioning and readability. Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add aria-label attributes to the 3:1 and 6:1 aspect ratio labels in the HeaderCrop component to improve accessibility for screen readers. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Move aspect ratio labels from right: 12% to left: 12% to position them on the left side of the crop frame for better visual alignment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Reposition labels from left: 12% to left: 1% to place them outside the crop frame boundary (which starts at 10% from left), improving visual separation between labels and cropping area. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Change label positioning from left-anchored to right-anchored (right: 90%) to maintain consistent spacing from the crop frame's left edge (at 10%) as the page size changes. This ensures labels stay properly aligned with the crop frame boundary across all viewport sizes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Update vertical positioning to match crop frame structure: - OuterRatioLabel (3:1): top: 10% - aligns with outer crop frame boundary - InnerRatioLabel (6:1): top: calc(10% + 80% * 0.25) - aligns with first horizontal grid line at 30% This ensures consistent vertical spacing that matches the crop guide positioning system. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add BottomInnerRatioLabel and BottomOuterRatioLabel styled components - Position labels on bottom two grid lines matching top labels style - Update .gitignore to exclude .playwright-mcp directory 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
storywithoutend
force-pushed
the
feature/fet-2590-app-v3-header-zoom-is-unresponsive
branch
from
2836ede to
03744a0
Compare
- Break long lines for BottomInnerRatioLabel and BottomOuterRatioLabel - Ensures build passes without prettier errors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Change vertical lines from 1/3 intervals to 25%/75% positions - Creates balanced 25% 50% 25% distribution matching horizontal lines - Provides more centered focal area in the crop frame 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
LeonmanRolls
approved these changes
Dec 2, 2025
The component displays two 3:1 and two 6:1 aspect ratio labels (top and bottom of the crop frame), so tests must use getAllByText instead of getByText to handle multiple matching elements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
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.
🤖 Generated with Claude Code