style: better responsive

packages/stage/src/components/Live2DViewer.vue

@@ -23,8 +23,7 @@ const mouthOpenSize = computed(() => {
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const { width, height } = useWindowSize()
-const containerElementBounding = useElementBounding(containerRef)
-const containerParentElementBounding = useElementBounding(containerRef.value?.parentElement)
+const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
 
 const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
 const isTablet = computed(() => breakpoints.between('md', 'lg').value)
@@ -41,15 +40,22 @@ const canvasWidth = computed(() => {
     return containerElementBounding.width.value
 })
 
-const canvasHeight = computed(() => {
-  if (isDesktop.value)
-    return Math.max(600, containerParentElementBounding.height.value)
-  else if (isMobile.value)
-    return 600
-  else if (isTablet.value)
-    return 600
-  else
-    return Math.max(600, containerParentElementBounding.height.value)
+const canvasHeight = ref(0)
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
 })
 
 function getCoreModel() {
@@ -57,9 +63,6 @@ function getCoreModel() {
 }
 
 async function initLive2DPixiStage(parent: HTMLDivElement) {
-  containerElementBounding.update()
-  containerParentElementBounding.update()
-
   // https://guansss.github.io/pixi-live2d-display/#package-importing
   Live2DModel.registerTicker(Ticker)
   extensions.add(TickerPlugin)
@@ -116,6 +119,8 @@ onMounted(async () => {
   if (!containerRef.value)
     return
 
+  containerElementBounding.update()
+
   await initLive2DPixiStage(containerRef.value)
 })
 
@@ -133,5 +138,5 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="containerRef" />
+  <div ref="containerRef" h-full w-full />
 </template>

packages/stage/src/components/MainStage.vue

@@ -272,7 +272,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div max-h="[100vh]" h-full p="2" flex="~ col">
+  <div h-full p="2" flex="~ col">
     <div flex gap-2>
       <fieldset
         flex="~ row"
@@ -318,17 +318,16 @@ onUnmounted(() => {
       <Settings />
     </div>
     <div flex="~ row 1" relative w-full items-end gap-2>
-      <div w="50%" min-w="50% <lg:full" min-h="100 sm:100" flex-1>
-        <Live2DViewer
-          v-if="selectedStageView === '2d'"
-          ref="live2DViewerRef"
-          :mouth-open-size="mouthOpenSize"
-          model="/assets/live2d/models/hiyori_pro_zh/runtime/hiyori_pro_t11.model3.json"
-        />
-        <ThreeViewer
-          v-else-if="selectedStageView === '3d'"
-        />
-      </div>
+      <Live2DViewer
+        v-if="selectedStageView === '2d'"
+        ref="live2DViewerRef"
+        :mouth-open-size="mouthOpenSize"
+        model="/assets/live2d/models/hiyori_pro_zh/runtime/hiyori_pro_t11.model3.json"
+        w="50%" min-w="50% <lg:full" min-h="100 sm:100" h-full flex-1
+      />
+      <ThreeViewer
+        v-else-if="selectedStageView === '3d'"
+      />
       <div
         class="relative <lg:(absolute bottom-0 from-zinc-800/80 to-zinc-800/0 bg-gradient-to-t p-2)"
         px="<sm:2" py="<sm:2" rounded="<sm:lg"
@@ -409,10 +408,18 @@ onUnmounted(() => {
             {{ 'name' in m ? `${m.name} (${m.id})` : m.id }}
           </option>
         </select>
-        <div fixed bottom="5" left="50%" translate-x="-50%">
+        <div flex gap-2>
+          <BasicTextarea
+            v-model="messageInput"
+            placeholder="Message"
+            p="2" bg="zinc-100 dark:zinc-700"
+            w="[95%]" rounded-lg outline-none
+            @submit="onSendMessage"
+          />
           <button
-            bg="zinc-100 dark:zinc-700" flex="~ row"
-            items-center rounded-full px-4 py-2 border="2 solid zinc-500/50"
+            flex="~ row"
+            p="2" bg="zinc-100 dark:zinc-700"
+            w="[5%]" items-center rounded-lg outline-none
             transition="all ease-in-out"
             @click="listening = !listening"
           >
@@ -432,13 +439,6 @@ onUnmounted(() => {
             </Transition>
           </button>
         </div>
-        <BasicTextarea
-          v-model="messageInput"
-          placeholder="Message"
-          p="2" bg="zinc-100 dark:zinc-700"
-          w-full rounded-lg outline-none
-          @submit="onSendMessage"
-        />
       </div>
     </div>
   </div>

packages/stage/src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div h-full w-full>
     <MainStage />
   </div>
 </template>