fix layout

src/@layouts/styles/_default-layout.scss

@@ -15,7 +15,7 @@ body {
   flex-grow: 1;
 
   // TODO: Use grid gutter variable here
-  padding-block: 1.5rem;
+  padding-block: 0.5rem;
 }
 
 .layout-footer {

src/@layouts/styles/_placeholders.scss

@@ -4,7 +4,7 @@
 %boxed-content {
   @at-root #{&}-spacing {
     // TODO: Use grid gutter variable here
-    padding-inline: 1.5rem;
+    padding-inline: 0.5rem;
   }
 
   inline-size: 100%;

src/App.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const route = useRoute()
+const route = useRoute();
 </script>
 
 <template>

src/components/cards/MediaCard.vue

@@ -31,8 +31,8 @@ const getChipColor = (type: string) => {
         :width="props.width"
         class="outline-none shadow ring-gray-500"
         :class="{
-          'scale-105 shadow-lg': hover.isHovering,
+          'transition transform-cpu duration-300 scale-105 shadow-lg': hover.isHovering,
-          'ring-1 transition duration-300 ': isImageLoaded,
+          'ring-1': isImageLoaded,
         }"
       >
         <VImg
@@ -96,10 +96,4 @@ const getChipColor = (type: string) => {
 .on-hover img {
   @apply brightness-50;
 }
-
-.media-slide-card {
-  position: relative;
-  flex: 0 0 auto;
-  max-inline-size: 11rem;
-}
 </style>

src/components/cards/SubscribeCard.vue

@@ -4,7 +4,7 @@ import { formatSeason } from "@core/utils/formatters";
 
 // 输入参数
 const props = defineProps({
-  media: Object as PropType<Subscribe>
+  media: Object as PropType<Subscribe>,
 });
 
 // 根据 type 返回不同的图标
@@ -25,28 +25,25 @@ const getPercentage = (total: number, lack: number) => {
   }
   return Math.round(((total - lack) / total) * 100);
 };
-
 </script>
 
 <template>
   <VCard
-    :key="props.media?.id" 
+    :key="props.media?.id"
     :image="props.media?.backdrop || props.media?.poster"
-    class="card-with-overlay">
+    class="card-with-overlay"
+  >
     <VCardItem>
       <template #prepend>
-        <VIcon
+        <VIcon size="1.9rem" color="white" :icon="getIcon(props.media?.type || '')" />
-          size="1.9rem"
-          color="white"
-          :icon="getIcon(props.media?.type||'')"
-        />
       </template>
       <VCardTitle class="text-white">
-        {{ props.media?.name }} {{ formatSeason(props.media?.season ? props.media?.season.toString() : "") }}
+        {{ props.media?.name }}
+        {{ formatSeason(props.media?.season ? props.media?.season.toString() : "") }}
       </VCardTitle>
       <template #append>
         <div class="me-n3">
-          <MoreBtn color="white"/>
+          <MoreBtn color="white" />
         </div>
       </template>
     </VCardItem>
@@ -57,9 +54,7 @@ const getPercentage = (total: number, lack: number) => {
       </p>
     </VCardText>
 
-    <VCardText
+    <VCardText class="d-flex justify-space-between align-center flex-wrap">
-      class="d-flex justify-space-between align-center flex-wrap"
-    >
       <div class="d-flex align-center">
         <IconBtn icon="mdi-star" color="white" class="me-1" />
         <span class="text-subtitle-2 text-white me-4">{{ props.media?.vote }}</span>
@@ -79,7 +74,9 @@ const getPercentage = (total: number, lack: number) => {
 
     <VProgressLinear
       v-if="props.media?.total_episode || 0 > 0"
-      :model-value="getPercentage(props.media?.total_episode || 0, props.media?.lack_episode || 0)"
+      :model-value="
+        getPercentage(props.media?.total_episode || 0, props.media?.lack_episode || 0)
+      "
       bg-color="success"
       color="success"
     />
@@ -87,7 +84,7 @@ const getPercentage = (total: number, lack: number) => {
 </template>
 
 <style lang="scss">
-.card-with-overlay img{
+.card-with-overlay img {
   @apply brightness-50;
 }
 </style>

src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
+import VerticalNavSectionTitle from "@/@layouts/components/VerticalNavSectionTitle.vue";
-import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
+import VerticalNavLayout from "@layouts/components/VerticalNavLayout.vue";
-import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
+import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
 
 // Components
-import Footer from '@/layouts/components/Footer.vue'
+import Footer from "@/layouts/components/Footer.vue";
-import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
+import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.vue";
-import UserProfile from '@/layouts/components/UserProfile.vue'
+import UserProfile from "@/layouts/components/UserProfile.vue";
 
 // Banner
 </script>
@@ -17,18 +17,12 @@ import UserProfile from '@/layouts/components/UserProfile.vue'
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center">
         <!-- 👉 Vertical nav toggle in overlay mode -->
-        <IconBtn
+        <IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
-          class="ms-n3 d-lg-none"
-          @click="toggleVerticalOverlayNavActive(true)"
-        >
           <VIcon icon="mdi-menu" />
         </IconBtn>
 
         <!-- 👉 Search -->
-        <div
+        <div class="d-flex align-center cursor-pointer" style="user-select: none">
-          class="d-flex align-center cursor-pointer"
-          style="user-select: none;"
-        >
           <!-- 👉 Search Trigger button -->
           <IconBtn>
             <VIcon icon="mdi-magnify" />