From 563775b13be794b1e1406b9ae2b80dc03652236a Mon Sep 17 00:00:00 2001
From: Ronny Shani <63248335+ironnysh@users.noreply.github.com>
Date: Fri, 19 Apr 2024 18:59:53 +0200
Subject: [PATCH] Add styles to ensure `iframes` are responsive (#1267)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ensures iframes are responsive.

This problem doesn't affect the Playground `iframe` embeds. Based on my
tests, the fix suggested here doesn't have a negative impact on them.

## What problem is it solving?

The video added in [PR
#530](https://github.com/WordPress/wordpress-playground/pull/530)
creates a horizontal overflow in small screens.

This isn't an isolated issue (it can be seen [on this page,
too](https://wordpress.github.io/wordpress-playground/start-using)),
which is why I thought it'll be good to add some default “defensive
styles” to the documentation site.

## How is the problem addressed?

By adding the following to the Docusaurus CSS:

```css
iframe {
  aspect-ratio: 16/9;
  max-width: 100%;
  display: block;
  height: auto;
}
```

## Testing Instructions
---
 packages/docs/site/src/css/custom.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/docs/site/src/css/custom.css b/packages/docs/site/src/css/custom.css
index b8fb50848b..d567f2e33d 100644
--- a/packages/docs/site/src/css/custom.css
+++ b/packages/docs/site/src/css/custom.css
@@ -109,3 +109,10 @@ li.footer__item a:hover {
 .footerLogoLink_mPrW {
 	opacity: 1 !important;
 }
+
+iframe {
+	aspect-ratio: 16/9;
+	max-width: 100%;
+	display: block;
+	height: auto;
+}