From fcdaf4259dafd5f4f9928dbae475a0eacbf8a5da Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker <me@ntucker.me>
Date: Sun, 10 Sep 2023 20:13:40 -0500
Subject: [PATCH] docs: Improve playground responsive css

---
 .../components/Playground/styles.module.css   | 45 ++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 8881e9979d37..aa3328d8d100 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -31,11 +31,8 @@
   border-bottom-left-radius: var(--ifm-global-radius);
   border-bottom-right-radius: var(--ifm-global-radius);
 }
-@media only screen and (min-width: 768px) {
-  .playgroundContainer.row {
-    flex-direction: row;
-  }
-}
+
+
 .playgroundContainer.row .hidden {
   display: none;
 }
@@ -402,3 +399,41 @@ div.fixtureJson {
 .playgroundEditor > section {
   position: auto !important;
 }
+
+
+@media only screen and (min-width: 768px) and (max-width: 996px) {
+  .playgroundContainer.row {
+    flex-direction: row;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .playgroundContainer.row > :last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: var(--ifm-global-radius);
+    border-bottom-left-radius: var(--ifm-global-radius);
+  }
+  .row.playgroundContainer > div:first-child {
+    border-bottom-left-radius: 0;
+  }
+  .playgroundContainer .playgroundHeader.tabControls:first-of-type {
+    border-top-right-radius: var(--ifm-global-radius);
+  }
+}
+@media only screen and (min-width: 997px) and (max-width: 1268px) {
+  .playgroundContainer.row > :last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: var(--ifm-global-radius);
+    border-bottom-left-radius: var(--ifm-global-radius);
+  }
+  .row.playgroundContainer > div:first-child {
+    border-bottom-left-radius: 0;
+  }
+  .playgroundContainer .playgroundHeader.tabControls:first-of-type {
+    border-top-right-radius: var(--ifm-global-radius);
+  }
+}
+@media only screen and (min-width: 1268px) {
+  .playgroundContainer.row {
+    flex-direction: row;
+  }
+}
\ No newline at end of file