fix cards

src/components/cards/MediaCard.vue

@@ -9,7 +9,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <VResponsive aspect-ratio="1/2" max-width="11rem">
+  <VResponsive aspect-ratio="1/2">
     <VCard>
       <VImg
         :src="props.media?.poster_path"

src/styles/styles.scss

@@ -2,3 +2,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.grid-media-card {
+  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
+}
+
+.media-slide-card {
+  position: relative;
+  flex: 0 0 auto;
+  max-width: 11rem;
+}

src/views/discover/MediaCardListView.vue

@@ -29,10 +29,8 @@ onMounted(fetchData);
 </script>
 
 <template>
-  <VRow>
-    <VCol v-for="data in dataList" :key="data.tmdb_id" cols="6" md="3" lg="2">
-      <MediaCard :media="data">
-      </MediaCard>
-    </VCol>
-  </VRow>
+  <div class="grid gap-3 grid-media-card">
+    <MediaCard v-for="data in dataList" :key="data.tmdb_id" :media="data">
+    </MediaCard>
+  </div>
 </template>

src/views/discover/MediaCardSlideView.vue

@@ -39,21 +39,9 @@ onMounted(fetchData);
       <MediaCard 
         :media="data" 
         @click="toggle"
-        class="mx-1" 
-        height="22rem"
-        width="11rem"
+        class="mx-1 media-slide-card" 
         :color="isSelected ? 'primary' : 'grey-lighten-1'"
       >
-        <div class="d-flex fill-height align-center justify-center">
-          <VScaleTransition>
-            <v-icon
-              v-if="isSelected"
-              color="white"
-              size="48"
-              icon="mdi-close-circle-outline"
-            ></v-icon>
-          </VScaleTransition>
-        </div>
       </MediaCard>
     </VSlideGroupItem>
   </VSlideGroup>