Fix video player overflow on /w/ page and modal view

[Copilot]

Video players were stretching to full browser width, forcing users to scroll to reach controls when the browser was full-screened.

Changes

• Watch.js: Constrain video player container using viewport-relative max-width calculation
• VideoModal.js: Apply same constraint pattern to modal video player

The fix uses CSS calc to derive max-width from available height, assuming 16:9 aspect ratio:

<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    maxHeight: 'calc(100vh - 64px)',
  }}
>
  <Box
    sx={{
      width: '100%',
      maxWidth: 'calc((100vh - 64px - 120px) * 16 / 9)',
    }}
  >
    <VideoJSPlayer ... />
    {/* controls, title, description */}
  </Box>
</Box>

This ensures the video player stays horizontally centered with all controls, titles, and descriptions visible within the viewport.

Original prompt

The video players on the /w/ page and the modal view player are stretching to the width of the browser which ends up forcing the user to scroll to get to the video controls if they have their browser full screened. The video player and related control / components such as titles, descriptions that appear below the player should never overflow past the viewable area.

At that point the video player should stay centered horizontally on the screen with all controls, titles, descriptions, related components that appear below it perfectly in view.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.