fix: 调整布局和样式，增加卡片网格的内边距以避免溢出

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

@@ -11,9 +11,9 @@ html {
 }
 
 body {
+  overflow: visible !important;
   background: rgb(var(--v-theme-background));
   overscroll-behavior-y: contain;
-  overflow: visible !important;
 
   --webkit-overflow-scrolling: touch;
 }
@@ -36,8 +36,8 @@ body,
 .layout-page-content {
   @include mixins.boxed-content(true);
 
-  overflow: visible;
   flex-grow: 1;
+  overflow: clip visible;
 
   // TODO: Use grid gutter variable here;
   padding-block: 1.5rem;

src/views/dashboard/MediaServerLatest.vue

@@ -68,20 +68,28 @@ onActivated(() => {
             <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
           </VCardItem>
 
+          <div class="dashboard-card-grid-wrap">
             <ProgressiveCardGrid
               :items="data"
               :get-item-key="item => item.id || item.link || item.title"
               :min-item-width="144"
               :item-aspect-ratio="1.5"
-            class="mx-3 mb-3"
               tabindex="0"
             >
               <template #default="{ item }">
                 <PosterCard :media="item" />
               </template>
             </ProgressiveCardGrid>
+          </div>
         </VCard>
       </template>
     </VHover>
   </div>
 </template>
+
+<style scoped>
+.dashboard-card-grid-wrap {
+  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+  padding: 0 0.75rem 0.75rem;
+}
+</style>

src/views/dashboard/MediaServerLibrary.vue

@@ -70,19 +70,27 @@ onActivated(() => {
           </template>
           <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
         </VCardItem>
+        <div class="dashboard-card-grid-wrap">
           <ProgressiveCardGrid
             :items="libraryList"
             :get-item-key="item => item.id || item.name"
             :min-item-width="240"
             :estimated-item-height="160"
-          class="mx-3 mb-3"
             tabindex="0"
           >
             <template #default="{ item }">
               <LibraryCard :media="item" height="10rem" />
             </template>
           </ProgressiveCardGrid>
+        </div>
       </VCard>
     </template>
   </VHover>
 </template>
+
+<style scoped>
+.dashboard-card-grid-wrap {
+  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+  padding: 0 0.75rem 0.75rem;
+}
+</style>

src/views/dashboard/MediaServerPlaying.vue

@@ -71,19 +71,27 @@ onActivated(() => {
           <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
         </VCardItem>
 
+        <div class="dashboard-card-grid-wrap">
           <ProgressiveCardGrid
             :items="playingList"
             :get-item-key="item => item.id || item.link || item.title"
             :min-item-width="240"
             :estimated-item-height="160"
-          class="mx-3 mb-3"
             tabindex="0"
           >
             <template #default="{ item }">
               <BackdropCard :media="item" height="10rem" />
             </template>
           </ProgressiveCardGrid>
+        </div>
       </VCard>
     </template>
   </VHover>
 </template>
+
+<style scoped>
+.dashboard-card-grid-wrap {
+  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+  padding: 0 0.75rem 0.75rem;
+}
+</style>