fix: input range margin on focus

[ronald-urbina]

Removes the negative bottom offset (-7px / -5px) from the #range hit zone that was causing a layout shift when the range control received focus (issue #1254).

Also fixes invalid CSS syntax in the height property by wrapping arithmetic expressions in calc() (max(100% + 7px) → max(calc(100% + 7px))).

Fixes 1254

---

Note

Low Risk
Low risk CSS-only change; may slightly alter the time range hit/hover area sizing/position across browsers.

Overview
Prevents layout shift when the range input receives focus by removing the negative bottom offset on the #range hit/hover zone and normalizing its default height in both base and @media (hover: hover) styles.

^{Reviewed by Cursor Bugbot for commit 51b2ed5. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

@ronald-urbina is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.55%. Comparing base (3ea80df) to head (51b2ed5).
⚠️ Report is 301 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1288      +/-   ##
==========================================
- Coverage   78.55%   73.55%   -5.00%     
==========================================
  Files          59       56       -3     
  Lines       11080    13884    +2804     
  Branches        0      783     +783     
==========================================
+ Hits         8704    10213    +1509     
- Misses       2376     3638    +1262     
- Partials        0       33      +33     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit bca7a00. Configure here.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
media-chrome-demo-nextjs	Ready	Preview, Comment	Apr 23, 2026 6:46pm