fix: add inline-flex alignment to slot[name=icon] for proper SVG centering in buttons

[n3crosis]

Fixes #1294

Nested <slot> elements in button components are inline by default, so vertical-align: middle on SVGs resolves against font baseline metrics rather than the control center. This causes icons to visually drift toward the bottom of the button.

Changes

• add display: inline-flex and align-items: center to slot[name="icon"] in src/js/media-chrome-button.ts
• mirror the slot alignment approach already used in src/js/menu/media-chrome-menu-item.ts

Affected buttons

• media-play-button
• media-mute-button
• media-fullscreen-button
• media-pip-button
• media-cast-button
• media-airplay-button
• media-captions-button

---

Note

Low Risk
Presentation-only CSS on the shared button component with no logic or API changes.

Overview
Fixes icon vertical alignment in shared media-chrome button chrome by styling the slot[name="icon"] wrapper with inline-flex and align-items: center, so slotted SVGs/icons center in the control instead of sitting low against the text baseline.

This is a small CSS-only change on the base media-chrome-button template and applies across play, mute, fullscreen, PiP, cast, airplay, captions, and related controls that use the icon slot.

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

[vercel]

@Copilot 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.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds styling to improve vertical alignment of custom slotted icons in media-chrome-button.

Changes:

• Style the icon named slot as an inline-flex container.
• Vertically center assigned icon content via align-items: center.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
media-chrome	Ready	Preview, Comment	May 28, 2026 6:47pm
media-chrome-demo-nextjs	Ready	Preview, Comment	May 28, 2026 6:47pm
media-chrome-docs	Ready	Preview, Comment	May 28, 2026 6:47pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.64%. Comparing base (3ea80df) to head (1be32de).
⚠️ Report is 314 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1295      +/-   ##
==========================================
- Coverage   78.55%   73.64%   -4.91%     
==========================================
  Files          59       56       -3     
  Lines       11080    13903    +2823     
  Branches        0      787     +787     
==========================================
+ Hits         8704    10239    +1535     
- Misses       2376     3631    +1255     
- 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.