From 91dc7240a9c6daaedae766b2c0ef804e9f42d1bd Mon Sep 17 00:00:00 2001
From: FireIsGood <fireisadequate@gmail.com>
Date: Fri, 2 Sep 2022 02:18:15 -0700
Subject: [PATCH 1/2] Fix iframe height

---
 assets/stylesheets/pages/_mdn.scss | 47 ++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss
index 900e60bc..ee2f3329 100644
--- a/assets/stylesheets/pages/_mdn.scss
+++ b/assets/stylesheets/pages/_mdn.scss
@@ -132,7 +132,50 @@
     dd { margin: 0; }
   }
 
-  iframe.interactive {
-    width: 100%;
+  .interactive {
+      width: 100%;
+      height: 680px;    
+      &.is-js-height {
+        height: 520px;
+      }
+      &.is-shorter-height {
+        height: 440px;
+      }
+      &.is-taller-height {
+        height: 730px;
+      }
+      &.is-tabbed-shorter-height {
+        height: 490px;
+      }
+      &.is-tabbed-standard-height {
+        height: 550px;
+      }
+      &.is-tabbed-taller-height {
+        height: 780px;
+      }
+    }
+  @media screen and (min-width: 993px) {
+    .interactive {
+      height: 380px;
+
+      &.is-js-height {
+        height: 450px;
+      }
+      &.is-shorter-height {
+        height: 370px;
+      }
+      &.is-taller-height {
+        height: 660px;
+      }
+      &.is-tabbed-shorter-height {
+        height: 360px;
+      }
+      &.is-tabbed-standard-height {
+        height: 430px;
+      }
+      &.is-tabbed-taller-height {
+        height: 640px;
+      }
+    }
   }
 }

From 0da713507a3b4771786d6784ca0b8280f0296711 Mon Sep 17 00:00:00 2001
From: Simon Legner <Simon.Legner@gmail.com>
Date: Tue, 6 Sep 2022 22:17:25 +0200
Subject: [PATCH 2/2] mdn: reference mdn/yari interactive-examples.scss

---
 assets/stylesheets/pages/_mdn.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss
index ee2f3329..0eaf7fd5 100644
--- a/assets/stylesheets/pages/_mdn.scss
+++ b/assets/stylesheets/pages/_mdn.scss
@@ -132,9 +132,10 @@
     dd { margin: 0; }
   }
 
+  // based on https://github.com/mdn/yari/blob/63936bc42c/client/src/document/interactive-examples.scss
   .interactive {
       width: 100%;
-      height: 680px;    
+      height: 680px;
       &.is-js-height {
         height: 520px;
       }