Skip to content

fix(home): mobile hero preview alignment and IconButton backgrounds#120

Merged
mkayander merged 2 commits intomainfrom
cursor/-bc-726e6da5-552e-4387-8f42-7097b9ff4c5a-94a2
Apr 7, 2026
Merged

fix(home): mobile hero preview alignment and IconButton backgrounds#120
mkayander merged 2 commits intomainfrom
cursor/-bc-726e6da5-552e-4387-8f42-7097b9ff4c5a-94a2

Conversation

@mkayander
Copy link
Copy Markdown
Owner

@mkayander mkayander commented Apr 7, 2026

Summary

  • Mobile layout: Preview header uses a stretched column on xs so rows can span full width. Traffic-light dots stay centered; Play / Replay / Callstack chips are right-aligned. Playback controls are right-aligned on mobile; helper caption matches.
  • Icon buttons (app-wide): Theme MuiIconButton now fixes MUI’s &:hover + @media (hover: none) rule that forced transparent background after touch (sticky hover), so custom resting bgcolor is no longer wiped on mobile. Focus-visible uses palette.action.focus and active uses palette.action.selected for consistent keyboard/press feedback everywhere.
  • Landing hero: Playback IconButtons only set resting bgcolor / color; hover/focus/active come from the theme like the rest of the app.

Testing

  • pnpm exec vitest run src/features/homePage/ui/landing/__tests__/HomeLandingHeroPreviewRuntime.test.tsx
  • pnpm exec eslint on touched files; tsc --noEmit
Open in Web Open in Cursor 

…n fills

- Center window dots and right-align feature chips on xs; stretch header row for alignment
- Right-align playback controls on mobile; caption text follows
- Override IconButton hover/focus/active so circular backgrounds persist after click

Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dstruct Ready Ready Preview, Comment Apr 7, 2026 7:49am

- Override MUI hover:none transparent background so sticky :hover keeps --IconButton-hoverBg
- Add focus-visible and active backgrounds from palette.action for keyboard and press feedback
- Drop redundant hero preview IconButton sx now covered by theme defaults

Co-authored-by: Max Kayander <mkayander@users.noreply.github.com>
@mkayander mkayander marked this pull request as ready for review April 7, 2026 17:53
@mkayander mkayander merged commit 1bd9f0c into main Apr 7, 2026
6 checks passed
github-actions bot pushed a commit that referenced this pull request Apr 7, 2026
## [1.374.2](v1.374.1...v1.374.2) (2026-04-07)

### Bug Fixes

* **home:** mobile hero preview alignment and IconButton backgrounds ([#120](#120)) ([1bd9f0c](1bd9f0c))
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 7, 2026

🎉 This PR is included in version 1.374.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants