feat(client): use full-width form for mobile devices

package.json

@@ -43,6 +43,7 @@
     "yml-register": "^1.0.0",
     "yakumo": "^0.3.1",
     "yakumo-esbuild": "^0.3.3",
+    "yakumo-esbuild-yaml": "^0.3.0",
     "yakumo-mocha": "^0.3.0",
     "yakumo-publish": "^0.3.0",
     "yakumo-tsc": "^0.3.0",

packages/client/client/components/icons/index.ts

@@ -1,11 +1,10 @@
 import { App, Component, defineComponent, h } from 'vue'
-import { IconCog, IconExternal, IconEye, IconEyeSlash } from 'schemastery-vue'
+import { IconExternal, IconEye, IconEyeSlash } from 'schemastery-vue'
 import Home from './activity/home.vue'
 import Moon from './activity/moon.vue'
 import Sun from './activity/sun.vue'
 import Application from './svg/application.vue'
 import Balance from './svg/balance.vue'
-import Book from './svg/book.vue'
 import BoxOpen from './svg/box-open.vue'
 import CheckFull from './svg/check-full.vue'
 import ChevronDown from './svg/chevron-down.vue'
@@ -47,15 +46,13 @@ register('activity:sun', Sun)
 
 register('application', Application)
 register('balance', Balance)
-register('book', Book)
 register('box-open', BoxOpen)
 register('check-full', CheckFull)
 register('chevron-down', ChevronDown)
 register('chevron-left', ChevronLeft)
 register('chevron-right', ChevronRight)
 register('chevron-up', ChevronUp)
 register('clipboard-list', ClipboardList)
-register('cog', IconCog)
 register('edit', Edit)
 register('exclamation-full', ExclamationFull)
 register('expand', Expand)

packages/client/client/components/layout/content.vue

@@ -6,12 +6,40 @@
   </el-scrollbar>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 .k-content {
+  --content-padding: 3rem;
+
   margin: auto;
   max-width: 50rem;
-  padding: 3rem 3rem 1rem;
+  padding: 3rem var(--content-padding) 1rem;
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  @media screen and (max-width: 768px) {
+    --content-padding: 2rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    --content-padding: 1.5rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    .k-form {
+      margin: 0 -1.5rem;
+
+      h2 {
+        padding: 0 1.5rem;
+      }
+
+      .schema-item {
+        padding: 0.5rem 1.5rem;
+      }
+    }
+  }
 }
 
 </style>

yakumo.yml

@@ -1,4 +1,4 @@
 require:
   - esbuild-register
-  - ./build/yaml
+  - yakumo-esbuild-yaml
   - ./build/client