Storybooks for commit f5a1d10401fadd35a3e4170ba26b8afa22764294

Date
8/31/2026, 9:39:25 PM UTC
Summary
fix(settings): stop clipping the avatar zoom slider
Description
## Because

- The leftover `slider.css` clipped the new zoom control to nothing. Its `.AvatarCropper input` rule set `clip: rect(0,0,0,0)` and `position: absolute` to hide MUI's proxy input, and the native `<input type="range">` sits inside the same `.AvatarCropper` container, so the rule matched it too.
- The zoom test drove the control with `fireEvent.change`, which only proves a synthetic value assignment. `.claude/rules/testing/react.md` asks for `userEvent`.

## This pull request

- Deletes `slider.css` and its `@import` from `tailwind.css`. Every selector in the file was `.AvatarCropper` or `.MuiSlider-*`, and only `PageAvatar/index.tsx` uses `.AvatarCropper`.
- Rewrites the zoom test in `PageAvatar/index.test.tsx` to use `userEvent.setup()`, with `user.upload()` for the file input and a `user.click()` on `zoom-in-btn` that drives the slider value to `1.1`.
- Keeps one `fireEvent.change` for the thumb move, with a comment. jsdom implements no default action for a range input, so neither a pointer drag nor an arrow key moves the thumb.

## Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-10214