From ab2be90a75ba090c257c2aee4447eee4eca83a0f Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Sun, 31 Aug 2025 15:00:38 +0530
Subject: [PATCH 1/6] fix(playconsole): avoid whitespace collapse in logs

---
 components/play-console/element.css | 3 ++-
 components/play-console/element.js  | 4 +---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/play-console/element.css b/components/play-console/element.css
index 05d190734..2b2fd29a7 100644
--- a/components/play-console/element.css
+++ b/components/play-console/element.css
@@ -29,7 +29,8 @@ li {
   }
 }
 
-code {
+pre {
+  display: inline-block;
   font-family: var(--font-family-code);
   tab-size: 4;
 }
diff --git a/components/play-console/element.js b/components/play-console/element.js
index 1398d388b..31431a7f4 100644
--- a/components/play-console/element.js
+++ b/components/play-console/element.js
@@ -115,9 +115,7 @@ export class MDNPlayConsole extends LitElement {
   render() {
     return html`
       <ul aria-live="polite">
-        ${this._messages.map(
-          (message) => html`<li><code>${message}</code></li>`,
-        )}
+        ${this._messages.map((message) => html`<li><pre>${message}</pre></li>`)}
       </ul>
     `;
   }

From ef73b208485208b970b39f2d1f54ed9e92243461 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Sun, 31 Aug 2025 15:14:51 +0530
Subject: [PATCH 2/6] need margin zero on pre

---
 components/play-console/element.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/play-console/element.css b/components/play-console/element.css
index 2b2fd29a7..c4e7eca18 100644
--- a/components/play-console/element.css
+++ b/components/play-console/element.css
@@ -31,6 +31,10 @@ li {
 
 pre {
   display: inline-block;
+
+  margin: 0;
+
   font-family: var(--font-family-code);
+
   tab-size: 4;
 }

From d570daf4cced10e62373409ae495d4eb4071f591 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Tue, 2 Sep 2025 12:11:11 +0530
Subject: [PATCH 3/6] simplify the CSS and handle multiline string

---
 components/play-console/element.css | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/components/play-console/element.css b/components/play-console/element.css
index c4e7eca18..a4c0fd674 100644
--- a/components/play-console/element.css
+++ b/components/play-console/element.css
@@ -16,25 +16,16 @@
 }
 
 ul {
-  padding: 0;
+  padding-left: 1rem;
   margin: 0;
-  list-style: none;
 }
 
-li {
-  padding: 0 0.5em;
-
-  &::before {
-    content: "> ";
-  }
+li::marker {
+  content: "> ";
 }
 
 pre {
-  display: inline-block;
-
   margin: 0;
-
   font-family: var(--font-family-code);
-
   tab-size: 4;
 }

From 62dc3e6438965d7b70ca4dbf835923cf529bf00b Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Tue, 2 Sep 2025 17:27:22 +0530
Subject: [PATCH 4/6] ::marker is not implemented by safari

---
 components/play-console/element.css | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/play-console/element.css b/components/play-console/element.css
index a4c0fd674..3d4b68904 100644
--- a/components/play-console/element.css
+++ b/components/play-console/element.css
@@ -16,16 +16,26 @@
 }
 
 ul {
-  padding-left: 1rem;
+  padding: 0;
   margin: 0;
+  list-style: none;
 }
 
-li::marker {
-  content: "> ";
+li {
+  padding: 0 0.5em;
+
+  &::before {
+    vertical-align: top;
+    content: "> ";
+  }
 }
 
 pre {
+  display: inline-block;
+
   margin: 0;
+
   font-family: var(--font-family-code);
+
   tab-size: 4;
 }

From 9dfc2638a412f918a240a3b442bc3d3d4d5785f7 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Thu, 4 Sep 2025 12:53:54 +0530
Subject: [PATCH 5/6] use white-space pre-wrap

---
 components/play-console/element.css | 6 +++++-
 components/play-console/element.js  | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/play-console/element.css b/components/play-console/element.css
index 3d4b68904..58bd2b750 100644
--- a/components/play-console/element.css
+++ b/components/play-console/element.css
@@ -23,6 +23,7 @@ ul {
 
 li {
   padding: 0 0.5em;
+  white-space: nowrap;
 
   &::before {
     vertical-align: top;
@@ -30,12 +31,15 @@ li {
   }
 }
 
-pre {
+code {
   display: inline-block;
 
+  width: 98%;
+
   margin: 0;
 
   font-family: var(--font-family-code);
 
   tab-size: 4;
+  white-space: pre-wrap;
 }
diff --git a/components/play-console/element.js b/components/play-console/element.js
index 31431a7f4..1398d388b 100644
--- a/components/play-console/element.js
+++ b/components/play-console/element.js
@@ -115,7 +115,9 @@ export class MDNPlayConsole extends LitElement {
   render() {
     return html`
       <ul aria-live="polite">
-        ${this._messages.map((message) => html`<li><pre>${message}</pre></li>`)}
+        ${this._messages.map(
+          (message) => html`<li><code>${message}</code></li>`,
+        )}
       </ul>
     `;
   }

From a6118db4f8da5d109fa6bc17da3d6d32d0a6cdc7 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Wed, 10 Sep 2025 18:02:47 +0530
Subject: [PATCH 6/6] Apply suggestions from code review

Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
---
 components/play-console/element.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/play-console/element.css b/components/play-console/element.css
index 58bd2b750..522ef5ef7 100644
--- a/components/play-console/element.css
+++ b/components/play-console/element.css
@@ -26,7 +26,12 @@ li {
   white-space: nowrap;
 
   &::before {
+    display: inline-block;
+
+    width: 0.75rem;
+
     vertical-align: top;
+
     content: "> ";
   }
 }
@@ -34,7 +39,7 @@ li {
 code {
   display: inline-block;
 
-  width: 98%;
+  width: calc(100% - 0.75rem);
 
   margin: 0;