fix(theater): replace max-height collapse with grid-rows + visibility; fix keyboard-focus leak when collapsed

This commit is contained in:
daniel-c-harvey
2026-06-21 09:12:24 -04:00
parent 9716092805
commit 6e12d0161a
5 changed files with 44 additions and 9 deletions
@@ -75,6 +75,7 @@ else
a collapsing wrapper so it does not pop — IsContentHidden collapses it to zero height when
Theater is on AND this Cut is the playing release. OFF eases it back to its normal layout. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
<div class="dd-theater-collapsible-inner">
@* Header split: meta + Play/Share on the LEFT, bordered cover on the RIGHT (spec §3.1). *@
<div class="cut-detail-header">
<div class="cut-detail-meta">
@@ -134,10 +135,12 @@ else
</div>
</div>
</div>
</div>
</Header>
<BodyContent>
@* Theater Mode (Wave 2 §2): eased collapse, mirroring the Header region. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
<div class="dd-theater-collapsible-inner">
@* Blurb sits between the header and the track-list divider. *@
<ReleaseDescription Description="@release.Description" />
<MudDivider Class="cut-detail-divider" />
@@ -169,6 +172,7 @@ else
</div>
}
</div>
</div>
</BodyContent>
</ReleaseDetailScaffold>
</div>
@@ -75,6 +75,7 @@ else
a collapsing wrapper so it does not pop — collapsed to zero height when Theater is on AND
this Mix is the playing release. OFF eases the full-bleed visualizer back behind the hero. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
<div class="dd-theater-collapsible-inner">
@* Cover-as-background hero with all metadata overlaid, square `mix-hero` sizing. The
cover art IS the background, so no separate cover thumbnail (CoverThumbKey defaults
to null). Share and play ride in as slots, matching Sessions. *@
@@ -99,12 +100,15 @@ else
</PlayContent>
</ReleaseHeroOverlay>
</div>
</div>
</Hero>
<BodyContent>
@* Theater Mode (Wave 2 §2): eased collapse, mirroring the Hero region. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
<div class="dd-theater-collapsible-inner">
@* Blurb sits below the hero, inside the scaffold's foreground stacking context. *@
<ReleaseDescription Description="@release.Description" />
</div>
</div>
</BodyContent>
</ReleaseDetailScaffold>
@@ -72,6 +72,7 @@ else
collapsing wrapper so they do not pop — collapsed to zero height when Theater is on AND this
Session is the playing release. The top row above stays. OFF eases this region back in. *@
<div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
<div class="dd-theater-collapsible-inner">
@* The overlay shows the cover thumbnail only when it differs from the resolved hero image —
when there is no dedicated hero, heroImage already falls back to release.ImagePath, so the
thumb would duplicate the background. That logic lives in ReleaseHeroOverlay. *@
@@ -98,6 +99,7 @@ else
<ReleaseDescription Description="@release.Description" />
</div>
</div>
</MudContainer>
}