💄 Responsive layout with grid

frontend/src/App.vue

@@ -5,7 +5,9 @@ import AudioDownload from "./views/AudioDownload.vue";
 </script>
 
 <template>
+  <div class="vh-100 vw-100 bg-body-secondary">
     <AudioDownload></AudioDownload>
+  </div>
 </template>
 
 <style scoped></style>

frontend/src/components/AudioCard.vue

@@ -44,13 +44,13 @@ const progress = computed(() => {
 </script>
 
 <template>
-  <div class="card mb-2 w-100 shadow-sm">
+  <div class="card w-100 shadow-sm">
     <div class="card-body position-relative">
       <h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
       <div v-else class="placeholder-wave">
         <h6 class="placeholder w-25 bg-secondary" style="height: 19px"></h6>
       </div>
-      <h5 v-if="title">{{ title }}</h5>
+      <h5 v-if="title" class="text-truncate">{{ title }}</h5>
       <div v-else class="placeholder-wave">
         <h5 class="placeholder w-75 bg-secondary" style="height: 24px"></h5>
       </div>
@@ -97,10 +97,6 @@ const progress = computed(() => {
 </template>
 
 <style scoped>
-.card {
-  max-width: 600px;
-}
-
 i {
   font-size: 36px;
 }

frontend/src/views/AudioDownload.vue

@@ -27,14 +27,22 @@ const p4 = {
 </script>
 
 <template>
-  <div
-    class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100"
-  >
+  <div class="container overflow-hidden">
+    <div class="row g-3 py-3">
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
         <AudioCard v-bind="p1"></AudioCard>
+      </div>
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
         <AudioCard v-bind="p2"></AudioCard>
+      </div>
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
         <AudioCard v-bind="p3"></AudioCard>
+      </div>
+      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
         <AudioCard v-bind="p4"></AudioCard>
       </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>