try new bottom components

src/components/AlbumView/AlbumBio.vue

@@ -8,10 +8,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['bio'],
-};
+<script setup lang="ts">
+defineProps<{
+  bio: string;
+}>();
 </script>
 
 <style lang="scss">
@@ -48,7 +48,6 @@ export default {
       width: 10rem;
     }
 
-
     .rect {
       width: 10rem;
       height: 10rem;
@@ -59,10 +58,10 @@ export default {
       left: 7rem;
       transform: rotate(45deg) translate(-1rem, -9rem);
       z-index: 1;
-      transition: all .5s ease-in-out;
+      transition: all 0.5s ease-in-out;
 
       &:hover {
-        transition: all .5s ease-in-out;
+        transition: all 0.5s ease-in-out;
       }
     }
 
@@ -86,4 +85,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/AlbumView/Header.vue

@@ -53,18 +53,17 @@ const imguri = paths.images.thumb;
 const nav = useNavStore();
 
 useVisibility(albumheaderthing, nav.toggleShowPlay);
-
-
 </script>
 
 <style lang="scss">
 .album-h {
-  height: 16rem;
+  height: auto;
 }
 
 .a-header {
   display: grid;
-  grid-template-columns: 15rem 1fr;
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
   padding: 1rem;
   height: 100%;
   background-color: $black;
@@ -79,8 +78,8 @@ useVisibility(albumheaderthing, nav.toggleShowPlay);
     align-items: flex-end;
 
     .image {
-      width: 14rem;
-      height: 14rem;
+      width: 15rem;
+      height: 15rem;
     }
   }