chore: switching full screen components' height unit from vh to % (#81)

* Switch full screen component height unit from vh to %

* Use dvh instead

* Add vh fallback

* Apply !important to overwrite default ModalPopup setting

app/app.css

@@ -1,7 +1,9 @@
 html,
 body,
 #__nuxt {
+  height: 100%;
   height: 100vh;
+  height: 100dvh;
   margin: 0;
   padding: 0;
 }

app/components/ImportDialog.vue

@@ -20,7 +20,7 @@ function onClickOutside() {
 <template>
   <ModalPopup
     :model-value="state.isImporting"
-    dialog-class="max-h-80vh! min-h-50vh grid grid-rows-[max-content_1fr_max-content] p0!"
+    dialog-class="max-h-80dvh! min-h-50dvh grid grid-rows-[max-content_1fr_max-content] p0!"
     @click-outside="onClickOutside"
   >
     <div p2 text-xl flex="~ gap-2 items-center justify-center" border="b base">

app/components/SettingsDialog.vue

@@ -17,7 +17,7 @@ const { t, locale, locales, setLocale } = useI18n()
   <ModalPopup
     v-model="showSettingsDialog"
     :direction="isMobileScreen ? 'bottom' : 'top'"
-    dialog-class="max-h-80vh! of-auto"
+    dialog-class="max-h-80dvh! of-auto"
   >
     <div flex p6 lt-lg="px2">
       <div mxa max-w-150 w-full flex="~ col gap-5 items-center">

app/components/SongActions.vue

@@ -152,7 +152,7 @@ function shareWithQifi() {
     v-model="showShareQifiCode"
     :direction="isMobileScreen ? 'top' : 'right'"
     :use-v-if="true"
-    :dialog-class="isMobileScreen ? 'max-h-85vh! of-auto' : 'max-w-150!'"
+    :dialog-class="isMobileScreen ? 'max-h-85dvh! of-auto' : 'max-w-150!'"
   >
     <QifiCode
       :share-url="shareUrl"

app/components/SongPlay.vue

@@ -154,7 +154,7 @@ onMounted(() => {
         <SettingsFloat mxa lt-lg="hidden" :song="song" />
       </div>
     </LyricsTrack>
-    <ModalPopup v-model="showInfoModal" dialog-class="max-h-90vh! p4">
+    <ModalPopup v-model="showInfoModal" dialog-class="max-h-90dvh! p4">
       <div pb-1 font-jp-serif>
         <p text-1.5em>
           {{ song.title }}

app/components/WelcomeDialog.vue

@@ -17,8 +17,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <ModalPopup v-model="open" direction="top">
-    <div class="markdown-content mxa max-h-80vh max-w-150 p6">
+  <ModalPopup v-model="open" direction="top" dialog-class="max-h-80dvh!">
+    <div class="markdown-content mxa max-w-150 p6">
       <Welcome />
       <div flex p5>
         <SimpleButton

app/components/editors/GPTDialog.vue

@@ -51,6 +51,6 @@ onMounted(() => {
     <div text-center op50>
       {{ $t('gpt.noteAboutPrompts') }}
     </div>
-    <pre mxa max-h-50vh max-w-200 of-auto rounded-xl bg-hex-888:15 px3 py2 text-sm v-text="gptText" />
+    <pre mxa max-h-50dvh max-w-200 of-auto rounded-xl bg-hex-888:15 px3 py2 text-sm v-text="gptText" />
   </div>
 </template>

app/components/editors/InsertMultilineLyricsDialog.vue

@@ -16,7 +16,7 @@ function importLyrics() {
 <template>
   <ModalPopup
     v-model="visible"
-    dialog-class="h-60vh! p0! flex justify-center"
+    dialog-class="h-60dvh! p0! flex justify-center"
     @click-outside="visible = false"
   >
     <div flex="~ col gap-4" h-full max-w-700px w-full p6>

app/components/editors/SongEditor.vue

@@ -430,7 +430,12 @@ onMounted(() => {
         input-class="min-h-400"
       />
 
-      <ModalPopup v-model="showGPTDialog" use-v-if direction="bottom" dialog-class="max-h-80vh">
+      <ModalPopup
+        v-model="showGPTDialog"
+        use-v-if
+        direction="bottom"
+        dialog-class="max-h-80dvh!"
+      >
         <GPTDialog :lrc="stateRef.lrc" />
       </ModalPopup>
     </div>

app/pages/index.vue

@@ -180,7 +180,7 @@ onMounted(() => {
 
     <div ref="searchAnchorEl" mb8 />
 
-    <div flex="~ col gap-8" min-h-100vh p10>
+    <div flex="~ col gap-8" min-h-100dvh p10>
       <SongsGrid v-if="!search.trimEnd() && favorited.length" :link="true" :songs="favorited" show-favorite="hover">
         <template #title>
           <div>{{ $t("actions.favorite") }}</div>

uno.config.ts

@@ -52,6 +52,16 @@ export default defineConfig({
       primary: '#0a9cae',
     },
   },
+  rules: [
+    [/^h-(\d+)dvh$/, ([_, d]) => [
+      ['height', `${d}vh`],
+      ['height', `${d}dvh`],
+    ]],
+    [/^max-h-(\d+)dvh$/, ([_, d]) => [
+      ['max-height', `${d}vh`],
+      ['max-height', `${d}dvh`],
+    ]],
+  ],
   presets: [
     presetUno(),
     presetAttributify(),