Bug: Minimal Tailwind Skin Root Collapses to 0×0 in a Flex Parent

[spuppo-mux]

Is there an existing issue for this?

• I have searched the existing issues

Which package(s) or projects are affected?

React Example

Browser/OS/Node environment

Browser: Safari
OS: macOS
Node version: recommended
npm version: recommended

Description

The minimal Tailwind skin root (packages/skins/src/minimal/tailwind/components/root.ts) renders as a 0×0 element when its parent is a flex container without align-items: stretch, even when the player is sized via aspect-ratio and max-width on the root.

Root cause: @container/media-root compiles to container-type: inline-size, which applies inline-size containment — the element's inline size can no longer be derived from its descendants. The minimal Tailwind root is display: block with no width declaration, so in a flex row parent with items-center (cross-axis = block axis, no stretch), it has no inline size to inherit and no descendants that can provide one. Width collapses to 0, aspect-ratio: 16/9 then produces 0 height, and the player is invisible.

The default Tailwind root had the same problem and was fixed in #881 ("fix(html): fix html container sizing") by adding h-full w-full. The minimal Tailwind root was missed and still has only block relative isolate @container/media-root. Suggested fix: add h-full w-full to the minimal root to match.

Affects all React + Tailwind + minimal-skin templates. CSS styling and HTML platform are unaffected.

Reduced test case

No response

Steps to reproduce

Reproduction: sandbox react-simple-hls-video template with ?skin=minimal&styling=tailwind. The template applies aspect-video max-w-4xl mx-auto to the skin and renders it inside <div class="flex justify-center items-center min-h-screen">. Nothing renders. Removing @container/media-root from the root element in devtools restores the player.

Current Behavior

Player renders as a 0×0

Expected Behavior

Player renders correctly

Errors

No response

What version of the package are you using?

latest

[github-actions]

Triage notes

Root cause confirmed by reading the source. The minimal Tailwind root at `packages/skins/src/minimal/tailwind/components/root.ts` is missing `h-full w-full` from its layout classes:

// current
'block relative isolate @container/media-root',

// fix — matches what was applied to the default skin in #881
'block relative isolate h-full w-full @container/media-root',

The CSS skin variants already declare `width: 100%; height: 100%;` and are unaffected. This is a straightforward one-line patch and a good first issue.

Planning recommendations

• Priority: P1 — the player is completely invisible in a common flex layout, affecting all React + Tailwind + minimal skin users.
• Milestone: GA (due 2026-07-31) — this is a regression in a shipped skin that should be resolved before GA.
• Related issues worth planning alongside this one:
  • Docs: Skins Reference Should List the Required CSS Import for Each Skin #1519 — Docs: Skins Reference Should List Required CSS Import per Skin (skin doc gaps)
  • Docs: Add Visual Previews to Skin Picker on Installation Page #1060 — Docs: Add Visual Previews to Skin Picker on Installation Page