feat: redesign task detail paper flow

frontend/src/components/AppSheet.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { isTopOverlay, overlayRoot, popOverlay, pushOverlay } from '../composables/useOverlayStack'
+import { isTopOverlay, overlayRoot, overlayZIndex, popOverlay, pushOverlay } from '../composables/useOverlayStack'
 
 const props = withDefaults(defineProps<{
   open: boolean
@@ -17,6 +17,7 @@ const props = withDefaults(defineProps<{
 defineOptions({ inheritAttrs: false })
 const emit = defineEmits<{ close: [] }>()
 const panel = ref<HTMLElement | null>(null)
+const layerZIndex = ref(80)
 let overlayId: symbol | null = null
 
 function requestClose() {
@@ -54,6 +55,7 @@ function focusIntoPanel() {
 async function activate() {
   if (!props.open || !props.modal || overlayId) return
   overlayId = pushOverlay(requestClose, () => props.busy, focusIntoPanel)
+  layerZIndex.value = overlayZIndex(overlayId)
   await nextTick()
   if (!props.open || !props.modal || !overlayId) return
   focusIntoPanel()
@@ -71,7 +73,7 @@ onBeforeUnmount(deactivate)
 
 <template>
   <Teleport v-if="modal" :to="overlayRoot()">
-    <div v-if="open" class="app-overlay app-sheet-mask" :aria-busy="busy || undefined" @click="scrimClose">
+    <div v-if="open" class="app-overlay app-sheet-mask" :style="{ zIndex: layerZIndex }" :aria-busy="busy || undefined" @click="scrimClose">
       <component :is="$attrs.onSubmit ? 'form' : 'section'" ref="panel" class="app-sheet" :class="[`app-sheet--${variant}`, panelClass]" role="dialog" aria-modal="true" :aria-labelledby="titleId" :aria-describedby="descriptionId" :aria-label="label" tabindex="-1" v-bind="$attrs" @keydown="keydown">
         <slot />
       </component>