layout: fix embedded video overflow causing horizontal scroll

[riyak145]

What

• Constrain .wp-block-video / .wp-block-embed and their inner media to the content column.
• Make videos/embeds responsive (max-width:100%; height:auto).
• Scope overflow handling to .entry-content (avoid masking legit wide elements site-wide).

Why

• On https://wordpress.org/documentation/article/block-error-unexpected-or-invalid-content/
  the embedded video exceeds the column, causing horizontal scrolling and header/TOC misalignment.

How to test

1. Build the theme (yarn workspace wporg-docs-2022-theme build) and view the article around 1024px width.
2. Confirm no horizontal scroll.
3. Header and right “In this article” TOC stay aligned.
4. Video scales within the content column.

Screenshots
Before:

here see the responsiveness :

After :

Note: This PR does not alter the example “invalid content” inside the article (that’s intentional for demonstration). It only fixes the surrounding layout so embeds remain responsive and don’t cause horizontal scrolling.

[dd32]

Hi @riyak145,

I'm unable to duplicate this issue, is there any additional information you can offer to reproduce? Is it browser or OS specific perhaps?

[riyak145]

Hello @dd32,

It’s possible this was fixed upstream or via content changes since my original report on Aug 19. I’m happy to close this PR if you prefer, or I can adjust it into a small, scoped guard-rail (e.g., max-width:100%; height : auto; on embeds under .entry-content) to prevent regressions. Let me know which you’d like.