docs: Improve playground responsive css

reactive · Sep 11, 2023 · fcdaf42 · fcdaf42
1 parent 8df9c89
commit fcdaf42
Showing 1 changed file with 40 additions and 5 deletions.
diff --git 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;
+  }
+}