BeardedBear · BeardedBear · Mar 21, 2026 · Mar 21, 2026
diff --git a/index.html b/index.html
@@ -28,14 +28,18 @@
       property="og:description"
       content="Experimental Spotify client with album collection feature (and more)..."
     />
-    <meta name="description" content="Experimental Spotify client with album collection feature (and more)..." />
+    <meta
+      name="description"
+      content="Experimental Spotify client with album collection feature (and more)..."
+    />
     <meta name="author" content="@BeardedBear" />
   </head>
 
   <body>
     <noscript>
       <strong>
-        We're sorry but Beardify doesn't work properly without JavaScript enabled. Please enable it to continue.
+        We're sorry but Beardify doesn't work properly without JavaScript
+        enabled. Please enable it to continue.
       </strong>
     </noscript>
     <style>
@@ -49,7 +53,7 @@
       .loading-app {
         background: #181b21;
         display: grid;
-        height: 100vh;
+        height: 100dvh;
         place-content: center;
         width: 100vw;
       }

diff --git a/src/components/dialog/AlbumVariants.vue b/src/components/dialog/AlbumVariants.vue
@@ -3,23 +3,15 @@
     <div :class="gridClass" class="album-variants-grid">
       <div class="album-variants-item">
         <Album
-          :album="dialogStore.albumGroup!.baseAlbum"
-          :can-save="canSave"
-          :cover-size="coverSize"
-          :with-artists="withArtists"
-          :without-metas="withoutMetas"
-          :without-release-date="withoutReleaseDate"
-        />
+:album="dialogStore.albumGroup!.baseAlbum" :can-save="canSave" :cover-size="coverSize"
+          :with-artists="withArtists" :without-metas="withoutMetas" :without-release-date="withoutReleaseDate"
+/>
       </div>
       <div v-for="variant in dialogStore.albumGroup!.variants" :key="variant.id" class="album-variants-item">
         <Album
-          :album="variant"
-          :can-save="canSave"
-          :cover-size="coverSize"
-          :with-artists="withArtists"
-          :without-metas="withoutMetas"
-          :without-release-date="withoutReleaseDate"
-        />
+:album="variant" :can-save="canSave" :cover-size="coverSize" :with-artists="withArtists"
+          :without-metas="withoutMetas" :without-release-date="withoutReleaseDate"
+/>
       </div>
     </div>
   </DialogWrap>
@@ -72,7 +64,7 @@ const gridClass = computed(() => {
   }
 
   &.grid-large {
-    max-height: 80vh;
+    max-height: 80dvh;
     max-width: 90vw;
     overflow-y: auto;
     width: 70rem;

diff --git a/src/components/dialog/DialogWrap.vue b/src/components/dialog/DialogWrap.vue
@@ -1,19 +1,14 @@
 <template>
   <div v-if="dialogStore.show" class="dialog">
     <div
-      v-show="!dialogStore.isMinimized"
-      :class="{ 'is-closing': dialogStore.isClosing }"
-      class="bg"
+v-show="!dialogStore.isMinimized" :class="{ 'is-closing': dialogStore.isClosing }" class="bg"
       @click="dialogStore.close()"
-    />
+/>
     <div
-      ref="wrapperRef"
-      v-motion
-      :initial="{ scale: 0.8, opacity: 0, y: 30 }"
+ref="wrapperRef" v-motion :initial="{ scale: 0.8, opacity: 0, y: 30 }"
       :enter="{ scale: 1, opacity: 1, y: 0, transition: { type: 'spring', stiffness: 200, damping: 20 } }"
-      :class="{ 'is-closing': dialogStore.isClosing, big, minimized: dialogStore.isMinimized }"
-      class="wrapper"
-    >
+      :class="{ 'is-closing': dialogStore.isClosing, big, minimized: dialogStore.isMinimized }" class="wrapper"
+>
       <div v-if="preContent" class="pre-content">
         <slot name="pre-content" />
       </div>
@@ -255,8 +250,8 @@ $radius: 2rem;
   overflow: auto;
 
   &.big {
-    height: 80vh;
-    max-height: 80vh;
+    height: 80dvh;
+    max-height: 80dvh;
     max-width: 90vw;
     width: 70rem;
   }

diff --git a/src/components/frame/FrameIndex.vue b/src/components/frame/FrameIndex.vue
@@ -1,19 +1,14 @@
 <template>
   <div v-if="frameStore.show" class="frame">
     <div
-      v-show="!frameStore.isMinimized"
-      :class="{ 'is-closing': frameStore.isClosing }"
-      class="bg"
+v-show="!frameStore.isMinimized" :class="{ 'is-closing': frameStore.isClosing }" class="bg"
       @click="frameStore.close()"
-    />
+/>
     <div
-      ref="wrapperRef"
-      v-motion
-      :initial="{ scale: 0.8, opacity: 0, y: 50 }"
+ref="wrapperRef" v-motion :initial="{ scale: 0.8, opacity: 0, y: 50 }"
       :enter="{ scale: 1, opacity: 1, y: 0, transition: { type: 'spring', stiffness: 200, damping: 20 } }"
-      :class="{ minimized: frameStore.isMinimized }"
-      class="iframe-wrap"
-    >
+      :class="{ minimized: frameStore.isMinimized }" class="iframe-wrap"
+>
       <LoadingDots class="load" />
       <div class="head">
         <div>{{ frameStore.siteName }}</div>
@@ -167,7 +162,7 @@ iframe {
   animation: pop-bg 0.2s ease both;
   border: 0;
   border-radius: 10px;
-  height: 80vh;
+  height: 80dvh;
   width: 80vw;
 
   &.is-closing {

diff --git a/src/components/player/PlayerSlideUp.vue b/src/components/player/PlayerSlideUp.vue
@@ -18,10 +18,9 @@
                 </p>
                 <p v-if="currentTrack?.album?.name" class="album">
                   <router-link
-                    :to="`/album/${transformUriToid(currentTrack.album.uri)}`"
-                    class="link"
+:to="`/album/${transformUriToid(currentTrack.album.uri)}`" class="link"
                     @click="playerStore.closePanel"
-                  >
+>
                     {{ currentTrack?.album?.name }}
                   </router-link>
                 </p>
@@ -83,7 +82,7 @@ const currentTrack = computed(() => playerStore.playerState?.track_window?.curre
     bottom: 0;
     box-shadow: 0 -1rem 3rem rgb(0 0 0);
     left: 0;
-    max-height: 92vh;
+    max-height: 92dvh;
     overflow: auto;
     padding: 2rem;
     position: absolute;