Fix Audio single result layout

src/components/VAudioDetails/VAudioDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="audio-info">
     <header class="mb-6 flex flex-row items-center justify-between">
-      <h2 class="text-2xl lg:text-3xl">
+      <h2 class="heading-6 md:heading-5">
         {{ $t('audio-details.information') }}
       </h2>
       <VContentReportPopover :media="audio" />

src/components/VAudioDetails/VRelatedAudio.vue

@@ -1,12 +1,12 @@
 <template>
   <aside :aria-label="$t('audio-details.related-audios')">
-    <h2 class="mb-6 text-2xl lg:text-3xl">
+    <h2 class="heading-6 lg:heading-6 mb-6">
       {{ $t('audio-details.related-audios') }}
     </h2>
     <!-- Negative margin compensates for the `p-4` padding in row layout. -->
     <div
       v-if="!fetchState.fetchingError"
-      class="-mx-4 mb-12 flex flex-col gap-4"
+      class="-mx-2 mb-12 flex flex-col gap-4 md:-mx-4"
     >
       <VAudioTrack
         v-for="audio in media"
@@ -23,37 +23,36 @@
   </aside>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
 
+import type { FetchState } from '~/models/fetch-state'
+import type { AudioDetail } from '~/models/media'
+
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
-export default {
+export default defineComponent({
   name: 'VRelatedAudio',
   components: { VAudioTrack, LoadingIcon },
   props: {
     media: {
-      type: Array,
+      type: Array as PropType<AudioDetail>,
       required: true,
     },
     fetchState: {
-      type: Object,
+      type: Object as PropType<FetchState>,
       required: true,
     },
   },
-  /**
-   * Fetches related audios on `audioId` change
-   * @return {{audioTrackSize: import('@nuxtjs/composition-api').ComputedRef<"l" | "s"> }}
-   */
   setup() {
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
     const audioTrackSize = computed(() => {
       return isMinScreenMd.value ? 'l' : 's'
     })
     return { audioTrackSize }
   },
-}
+})
 </script>

src/models/media.ts

@@ -27,6 +27,8 @@ export interface Media {
 
   frontendMediaType: SupportedMediaType
 
+  description?: string
+
   category: string | null
   provider: string
   source?: string