Fix: Cap Portrait Video Wrapper Height

[quietsignal44]

Summary

Portrait/vertical videos set .video-wrapper height to 177.78vw, which on wide viewports extends far below the visible video area (e.g. 3413px on a 1920px-wide screen). This creates an invisible overlay that blocks clicks on scene tabs, rating buttons, and other UI elements positioned below or beside the player.

Root cause

In ui/v2.5/src/components/ScenePlayer/styles.scss (lines 21-23):

&.portrait .video-wrapper {
    height: 177.78vw;
}

The 177.78vw value (100vw × 16/9) is intended to make portrait videos fill the viewport width at the correct aspect ratio, but there is no upper bound. The wrapper's box extends past the visible video (which is clipped by overflow: hidden) and intercepts pointer events on elements below.

Fix

Add max-height: calc(100vh - 4rem) so the wrapper never exceeds the available viewport height:

&.portrait .video-wrapper {
    height: 177.78vw;
    max-height: calc(100vh - #{$menuHeight});
}

This preserves the existing behavior for viewports where 177.78vw fits, while capping the height on wider screens where it would otherwise overflow.

Related issues

• Part of the UI unclickable on mobile when viewing portrait scenes #6276 — "Part of the UI unclickable on mobile when viewing portrait scenes" (closed, but the underlying CSS issue remains in the codebase)
• Player bottom controls are clipped (fullscreen missing) + menus overlap/are occluded (z-index/stacking issue) #6526 — Player z-index/stacking issues (related stacking context problem)

🤖 Generated with Claude Code

https://claude.ai/code/session_01S4siNHnHXrvxFCU7uYaka3

[quietsignal44]

@WithoutPants @Gykes — Would appreciate your eyes on this one. It's a one-line CSS fix for portrait/vertical videos creating an invisible overlay that blocks clicks on scene tabs and rating buttons below the player.

The root cause is the height: 177.78vw on .VideoPlayer.portrait .video-wrapper with no upper bound — on wider viewports the wrapper extends thousands of pixels past the visible video area. The fix adds max-height: calc(100vh - 4rem) to cap it.

Related to the closed #6276 (same symptoms, but the underlying CSS issue was never addressed).

[Gykes]

Did a quick test with a vertical video and didn't see any obvious regressions.