fix: playlist create button wrap on small screens

static/asteroid.css

@@ -8,7 +8,7 @@ body{
     color: #00ffff;
     margin: 0;
     padding: 20px;
-    box-sizing: boder-box;
+    box-sizing: border-box;
 }
 
 body .container{
@@ -393,6 +393,7 @@ body .playlist-input{
     color: #00ffff;
     border: 1px solid #2a3441;
     font-family: Courier New, monospace;
+    box-sizing: border-box;
 }
 
 body .playlist-list{
@@ -1011,4 +1012,17 @@ body .stat-card .stat-label{
     color: #ccc;
     font-size: 0.875rem;
     margin-top: 0.5rem;
+}
+
+@media (max-width: 576px){
+    body .playlist-controls{
+        display: block;
+    }
+    body .playlist-controls >*{
+        width: 100%;
+    }
+    body .playlist-controls button{
+        margin-left: 0;
+        margin-right: 0;
+    }
 }

static/asteroid.lass

@@ -12,7 +12,7 @@
     :color "#00ffff"
     :margin 0
     :padding "20px"
-    :box-sizing "boder-box"
+    :box-sizing "border-box"
 
     (.container
      :max-width "1200px"
@@ -315,7 +315,8 @@
      :background "#0a0a0a"
      :color "#00ffff"
      :border "1px solid #2a3441"
-     :font-family "Courier New, monospace")
+     :font-family "Courier New, monospace"
+     :box-sizing "border-box")
 
     (.playlist-list
      :border "1px solid #2a3441"
@@ -811,4 +812,14 @@
     ;;  :text-align center)
 
   ) ;; Close main body block
+
+  ;; media queries for reponsiveness
+  (:media "(max-width: 576px)"
+          (body
+           (.playlist-controls
+            :display block
+            ;;:width "100%"
+            (>* :width "100%")
+            (button :margin-left 0
+                    :margin-right 0))))
 ) ;; End of let block