add mobile design to playground

src/components/playground/Header.tsx

@@ -15,17 +15,11 @@ export default function Header({
     onZip: () => void;
 }) {
     return (
-        <header
+        <header>
-            style={{
-                display: "flex",
-                justifyContent: "space-between",
-                marginBottom: "0.5cm",
-            }}
-        >
             <h1 id="_top">{lang.title}</h1>
             <div className="buttons" style={{ height: "100%" }}>
                 <DropdownButton
-                    style={{ height: "100%", marginRight: "0.5cm"}}
+                    style={{ height: "100%", marginRight: "0.5cm" }}
                     visible={[[lang.buttons.save, onSave]]}
                     options={[[lang.buttons.reset, onReset]]}
                 />

src/styles/playground.scss

@@ -1,22 +1,43 @@
 .playground {
     display: grid;
-    grid-template-columns: clamp(200px, 15%, 500px) auto;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "header header"
+        "header"
-        "files editor";
+        "files"
+        "editor";
+
+    @media only screen and (min-width: 640px) {
+        grid-template-columns: clamp(200px, 15%, 500px) auto;
+        grid-template-areas:
+            "header header"
+            "files editor";
+    }
 
     > header {
         grid-area: header;
+        display: flex;
+        margin-bottom: 0.5cm;
+        flex-direction: column;
+        max-width: 95dvw;
+
+        @media only screen and (min-width: 450px) {
+            justify-content: space-between;
+            flex-direction: row;
+        }
     }
+
     > .file-view {
         grid-area: files;
         display: flex;
         flex-direction: column;
-        margin-right: 0.5cm;
         overflow-x: hidden;
         overflow-y: hidden;
         max-height: 70vh;
 
+        @media only screen and (min-width: 640px) {
+            margin-right: 0.5cm;
+        }
+
         > h3 {
             cursor: pointer;
         }
@@ -47,6 +68,10 @@
     > .editor {
         grid-area: editor;
 
+        @media only screen and (max-width: 640px) {
+            max-width: 100%;
+        }
+
         .monaco-editor {
             padding-block: 10px;
         }

src/wasm/webcompiler/Cargo.toml

@@ -13,7 +13,7 @@ opt-level = "s"
 
 [dependencies]
 wasm-bindgen = "0.2.92"
-shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox"], rev = "a0a27cda96e1922b019b216961c39f7ef7991d22" }
+shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox"], rev = "8953b347c562615fef3a8d500b0bb86f7f717a08" }
 serde = "1.0"
 serde-wasm-bindgen = "0.6.5"
 anyhow = "1.0.86"

src/wasm/webcompiler/src/util.rs

@@ -6,7 +6,7 @@ use shulkerscript::{
     lexical::token_stream::TokenStream,
     shulkerbox::{datapack::Datapack, util::compile::CompileOptions, virtual_fs::VFolder},
     syntax::{parser::Parser, syntax_tree::program::ProgramFile},
-    transpile::transpiler::Transpiler,
+    transpile::Transpiler,
 };
 
 use crate::Printer;