fix: editor styles on mobile; update deps

okikio · Sep 17, 2021 · 407d216 · 407d216
1 parent 406c954
commit 407d216
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -128,4 +128,4 @@ docs/
 .snowpack/
 
 # macOS-specific files
-.DS_Store
+.DS_Store
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
         "@commitlint/cli": "^13.1.0",
         "@commitlint/config-conventional": "^13.1.0",
         "@csstools/postcss-sass": "^4.0.0",
-        "@types/node": "^16.9.1",
+        "@types/node": "^16.9.2",
         "autoprefixer": "^10.3.4",
         "browser-sync": "^2.27.5",
         "commitizen": "^4.2.4",
@@ -81,7 +81,7 @@
         "postcss-csso": "^5.0.1",
         "postcss-scss": "^4.0.0",
         "rollup": "^2.56.3",
-        "sass": "^1.41.0",
+        "sass": "^1.41.1",
         "standard-version": "^9.3.1",
         "tailwindcss": "^2.2.15"
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/_headers b/src/assets/_headers
@@ -31,10 +31,6 @@
   Cache-Control: public, max-age=31536000, immutable
   Content-Type: font/ttf
 
-/js/*.css
-  Cache-Control: public, max-age=31536000, immutable
-  Content-Type: text/css
-
 /js/*.js
   Cache-Control: public, max-age=604800, stale-while-revalidate=31536000
   Content-Type: text/javascript

diff --git a/src/css/components/_monaco.scss b/src/css/components/_monaco.scss
@@ -1,16 +1,18 @@
 .flex-wrapper {
-    @apply gap-3 w-full relative pb-2 mb-8 container max-w-screen-xl;
-    display: grid;
-    grid-template-columns: auto;
-    grid-auto-flow: column;
-    grid-auto-rows: 1fr;
-    min-height: 400px - 56px;
+    @apply w-full relative px-3 pb-6 mb-8 container max-w-screen-xl;
+    @apply grid gap-3 sm:grid-flow-col sm:grid-rows-1 lt-sm:grid-flow-row ;
+    // grid-template-columns: auto;
+    min-height: (300px - 56px) * 2;
     resize: vertical;
     overflow: hidden;
 
-    @screen lt-md {
+    @screen sm {
         min-height: 350px - 56px;
     }
+
+    @screen md {
+        min-height: 400px - 56px;
+    }
 }
 
 .app {
@@ -20,14 +22,18 @@
     padding-top: 15px;
     padding-bottom: 15px;
     height: 100%;
-
+    
     resize: horizontal;
+
+    @screen lt-sm {
+        resize: vertical;
+    }
     overflow: hidden;
 }
 
 .app#output {
-    // resize: vertical;
-    // height: 100%;
+    resize: none;
+    height: 100%;
 }
 
 .push-to-side {