From 1fc9459508c2128e5b74960b128717982845b58d Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 5 Sep 2025 16:51:05 +0530
Subject: [PATCH 1/3] fix(playground): overlay run button for shared playground

---
 components/playground/element.css | 12 ++++++++++++
 components/playground/element.js  | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/components/playground/element.css b/components/playground/element.css
index 9a56bc330..4c2f3db04 100644
--- a/components/playground/element.css
+++ b/components/playground/element.css
@@ -93,6 +93,8 @@
     }
 
     &.playground__runner-console {
+      position: relative;
+
       grid-area: runner;
 
       overflow: hidden;
@@ -168,3 +170,13 @@ mdn-modal {
     justify-content: flex-end;
   }
 }
+
+.overlay-run-button {
+  position: absolute;
+  inset: 4rem 1rem 9rem;
+  z-index: 1;
+
+  background-color: var(--color-gray-40);
+  border: 1px dashed gray;
+  border-radius: 0.5rem;
+}
diff --git a/components/playground/element.js b/components/playground/element.js
index 17268195e..2cda08fa8 100644
--- a/components/playground/element.js
+++ b/components/playground/element.js
@@ -65,6 +65,7 @@ export class MDNPlayground extends L10nMixin(LitElement) {
         this._autoRun = true;
         controller.runOnChange = true;
         this._storeSession();
+        this.requestUpdate();
       }
     }
   }
@@ -361,6 +362,15 @@ ${"```"}`,
                   Seeing something inappropriate?
                 </mdn-button>`
               : nothing}
+            ${this._autoRun
+              ? nothing
+              : html`<mdn-button
+                  class="overlay-run-button"
+                  @click=${this._run}
+                  variant="plain"
+                >
+                  Run
+                </mdn-button>`}
             <mdn-play-runner></mdn-play-runner>
             <div class="playground__console">
               <div>${this.l10n`Console`}</div>

From 5493b669faadcb741f302742fdf4fb70bbc72fa2 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 5 Sep 2025 17:15:48 +0530
Subject: [PATCH 2/3] use theme color

---
 components/playground/element.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/playground/element.css b/components/playground/element.css
index 4c2f3db04..94087ac9f 100644
--- a/components/playground/element.css
+++ b/components/playground/element.css
@@ -176,7 +176,6 @@ mdn-modal {
   inset: 4rem 1rem 9rem;
   z-index: 1;
 
-  background-color: var(--color-gray-40);
-  border: 1px dashed gray;
+  background-color: var(--color-border-primary);
   border-radius: 0.5rem;
 }

From 914945227226668a272270fe3a3d884f74cfdc63 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Mon, 15 Sep 2025 12:15:15 +0530
Subject: [PATCH 3/3] add circle-play icon, increase size, and responsive icon
 size

---
 components/playground/element.css | 2 ++
 components/playground/element.js  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/components/playground/element.css b/components/playground/element.css
index 94087ac9f..7b223ab1f 100644
--- a/components/playground/element.css
+++ b/components/playground/element.css
@@ -176,6 +176,8 @@ mdn-modal {
   inset: 4rem 1rem 9rem;
   z-index: 1;
 
+  font-size: clamp(1.5rem, 3vw, 3rem);
+
   background-color: var(--color-border-primary);
   border-radius: 0.5rem;
 }
diff --git a/components/playground/element.js b/components/playground/element.js
index 2cda08fa8..3f556bf6b 100644
--- a/components/playground/element.js
+++ b/components/playground/element.js
@@ -4,6 +4,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
 import { gleanClick } from "../../utils/glean.js";
+import circlePlay from "../icon/circle-play.svg?lit";
 import { globalUser } from "../user/context.js";
 
 import styles from "./element.css?lit";
@@ -367,6 +368,7 @@ ${"```"}`,
               : html`<mdn-button
                   class="overlay-run-button"
                   @click=${this._run}
+                  .icon=${circlePlay}
                   variant="plain"
                 >
                   Run