Playground styles

Author: slowcheetah

website/src/playground.html

@@ -1,15 +1,16 @@
-<div class="back-link">
-    <a href="#">
-        <span class="icon">
-            <svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"></path>
-            </svg>
-        </span>
-        Back
-    </a>
-</div>
 <h1>Playground</h1>
-<div class="playground-versions">{versions-menu}</div>
+<div class="playground-navigation">
+    <div class="back-link">
+        <a href="#">
+            <span class="icon">
+                <svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"></path>
+                </svg>
+            </span> Back
+        </a>
+    </div>
+    <div class="playground-versions">{versions-menu}</div>
+</div>
 <div class="sandbox-wrapper">
     <div class="editor">
         <textarea id="code-input" class="input" spellcheck="false"></textarea>

website/src/scss/parts/playground.scss

@@ -72,10 +72,6 @@
       padding-top: 0.25rem;
       z-index: 3;
 
-      @include media("min", "lg") {
-        display: none;
-      }
-
       a {
         display: block;
         width: 24px;
@@ -143,9 +139,25 @@
   }
 }
 
+.playground-navigation {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @include media("min", "md") {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
 .playground-versions {
+  min-width: 200px;
+  width: 100%;
+
   @include media("min", "md") {
     max-width: 200px;
+    margin-left: auto;
   }
 
   .dropdown .dropdown-wrapper > a:after {