feat(stage-web): improved, both all devtools and 404

apps/stage-web/src/layouts/default.vue

@@ -23,7 +23,7 @@ import HeaderLink from '../components/Layouts/HeaderLink.vue'
       <HeaderLink />
     </div>
     <!-- Content -->
-    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" mx-auto h-full max-w-screen-xl>
+    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" h="[calc(100%-56px)]">
       <RouterView />
     </div>
   </div>

apps/stage-web/src/pages/[...all].vue

@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { Button } from '@proj-airi/stage-ui/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+</script>
+
 <template>
-  <div>
-    404 - Page not found
+  <div h-full w-full flex flex-col items-center justify-center gap-4>
+    <div text-3xl>
+      Where are we?
+    </div>
+    <div>
+      <Button @click="router.go(-1)">
+        Go Back
+      </Button>
+    </div>
   </div>
 </template>

apps/stage-web/src/pages/devtools/background-gradient-blending.vue

@@ -164,7 +164,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-fit w-full flex flex-col gap-4">
+  <div class="h-full w-full flex flex-col gap-4">
     <div class="relative w-full overflow-hidden rounded-xl">
       <div class="pointer-events-none left-0 right-0 top-0 z-10 flex items-center justify-center backdrop-blur-md" :style="{ background: topBar }">
         <div class="py-4 text-center text-sm text-white font-medium">
@@ -177,7 +177,7 @@ onUnmounted(() => {
       <img
         ref="imageRef"
         :src="images[0]"
-        class="h-full max-h-[calc(100dvh-25rem)] w-full object-cover"
+        class="h-full max-h-[calc(100dvh-28rem)] w-full object-cover"
       >
 
       <!-- Live2D area placeholder -->

apps/stage-web/src/pages/devtools/gesture-circle.vue

@@ -68,7 +68,10 @@ watch([x, y], () => {
 
   canvasContext.value.beginPath()
   canvasContext.value.fillStyle = 'red'
-  canvasContext.value.arc(x.value, y.value, 4, 0, 2 * Math.PI)
+  // 20: padding left
+  // 40: padding top
+  // 40: header
+  canvasContext.value.arc(x.value - 20, y.value - 40 - 40, 4, 0, 2 * Math.PI)
   canvasContext.value.closePath()
   canvasContext.value.fill()
 })
@@ -126,7 +129,7 @@ watch(pointThrottled, (point) => {
 </script>
 
 <template>
-  <div ref="containerRef" h-full>
+  <div ref="containerRef" h="[calc(100dvh-40px)]">
     <div relative h-full>
       <div bg="neutral-100/50 dark:neutral-900/50" absolute inset-0 h-fit rounded-xl px-3 py-2 font-mono shadow-md backdrop-blur-md grid="~ cols-[150px_1fr]">
         <div text="neutral-400 dark:neutral-600">

apps/stage-web/src/pages/devtools/polaroid.vue

@@ -77,10 +77,11 @@ function handleShot() {
         </option>
       </select>
     </div>
-    <div border="2px solid white" flex items-center justify-center rounded-full p-1>
+    <div border="2px solid black dark:white" flex items-center justify-center rounded-full p-1>
       <button
-        h-18 w-18 rounded-full bg="white active:gray-50" outline-none
-        transition-colors duration-200 ease-in-out
+        class="h-15 w-15 md:h-18 md:w-18"
+        bg="black active:neutral-950 dark:white dark:active:neutral-50"
+        rounded-full outline-none transition-colors duration-200 ease-in-out
         @click="handleShot"
       />
     </div>