From 3620b2a9790b6ea3fce376339e504e4a3bd719cc Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 5 Jun 2026 08:24:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E7=BD=91=E6=A0=BC=E7=9A=84=E5=86=85=E8=BE=B9=E8=B7=9D?=
 =?UTF-8?q?=E4=BB=A5=E9=81=BF=E5=85=8D=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@layouts/styles/_default-layout.scss   |  4 +--
 src/views/dashboard/MediaServerLatest.vue  | 32 ++++++++++++++--------
 src/views/dashboard/MediaServerLibrary.vue | 32 ++++++++++++++--------
 src/views/dashboard/MediaServerPlaying.vue | 32 ++++++++++++++--------
 4 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss
index 415bd670..b7dd3220 100644
--- a/src/@layouts/styles/_default-layout.scss
+++ b/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;
diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
index 355db462..0b2ffab6 100644
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -68,20 +68,28 @@ onActivated(() => {
             <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
           </VCardItem>
 
-          <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 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"
+              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>
diff --git a/src/views/dashboard/MediaServerLibrary.vue b/src/views/dashboard/MediaServerLibrary.vue
index cb5091c5..5deb3301 100644
--- a/src/views/dashboard/MediaServerLibrary.vue
+++ b/src/views/dashboard/MediaServerLibrary.vue
@@ -70,19 +70,27 @@ onActivated(() => {
           </template>
           <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
         </VCardItem>
-        <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 class="dashboard-card-grid-wrap">
+          <ProgressiveCardGrid
+            :items="libraryList"
+            :get-item-key="item => item.id || item.name"
+            :min-item-width="240"
+            :estimated-item-height="160"
+            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>
diff --git a/src/views/dashboard/MediaServerPlaying.vue b/src/views/dashboard/MediaServerPlaying.vue
index db1967e0..3dc77fe7 100644
--- a/src/views/dashboard/MediaServerPlaying.vue
+++ b/src/views/dashboard/MediaServerPlaying.vue
@@ -71,19 +71,27 @@ onActivated(() => {
           <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
         </VCardItem>
 
-        <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 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"
+            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>