From df8e6016cd81c6530b1640aab93010f60b915b70 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 6 Jun 2026 20:54:46 +0800
Subject: [PATCH] feat(dashboard): improve layout and styling for media
 components

---
 src/components/misc/DashboardElement.vue   | 19 ++++++++++++++-
 src/views/dashboard/MediaServerLatest.vue  | 28 +++++++++++++++++-----
 src/views/dashboard/MediaServerLibrary.vue | 14 +++++++----
 src/views/dashboard/MediaServerPlaying.vue | 14 +++++++----
 4 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/misc/DashboardElement.vue b/src/components/misc/DashboardElement.vue
index a5cd91d0..c119438c 100644
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -136,7 +136,7 @@ onUnmounted(() => {
   <!-- 插件仪表板 -->
   <template v-else-if="!isNullOrEmptyObject(props.config)">
     <!-- Vue 渲染模式 -->
-    <div v-if="pluginRenderMode === 'vue'">
+    <div v-if="pluginRenderMode === 'vue'" class="dashboard-plugin-vue-renderer">
       <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" :api="api" />
     </div>
     <!-- Vuetify 渲染模式 -->
@@ -168,3 +168,20 @@ onUnmounted(() => {
     </VCard>
   </template>
 </template>
+
+<style scoped>
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+.dashboard-plugin-vue-renderer {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 0;
+}
+
+.dashboard-plugin-vue-renderer :deep(> *) {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+</style>
diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
index 5b345f36..2b4866e1 100644
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -57,14 +57,15 @@ onActivated(() => {
 </script>
 
 <template>
-  <div>
+  <div class="dashboard-media-stack">
     <VCard v-for="(data, name) in latestList" :key="name" class="dashboard-work-card dashboard-media-card">
       <VCardItem>
         <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
       </VCardItem>
 
-      <div class="dashboard-card-grid-wrap">
+      <div class="px-3 pb-3">
         <ProgressiveCardGrid
+          class="dashboard-media-grid"
           :items="data"
           :get-item-key="item => item.id || item.link || item.title"
           :min-item-width="144"
@@ -81,11 +82,26 @@ onActivated(() => {
 </template>
 
 <style scoped>
-.dashboard-card-grid-wrap {
-  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+.dashboard-media-stack {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+.dashboard-media-stack > .dashboard-media-card {
   flex: 1 1 auto;
   min-block-size: 0;
-  overflow: auto;
-  padding: 0 0.75rem 0.75rem;
+}
+
+.dashboard-media-grid {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.dashboard-media-grid :deep(.progressive-card-grid__track) {
+  min-block-size: 100%;
 }
 </style>
diff --git a/src/views/dashboard/MediaServerLibrary.vue b/src/views/dashboard/MediaServerLibrary.vue
index 582ce3a7..62698fdb 100644
--- a/src/views/dashboard/MediaServerLibrary.vue
+++ b/src/views/dashboard/MediaServerLibrary.vue
@@ -65,8 +65,9 @@ onActivated(() => {
     <VCardItem>
       <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
     </VCardItem>
-    <div class="dashboard-card-grid-wrap">
+    <div class="px-3 pb-3">
       <ProgressiveCardGrid
+        class="dashboard-media-grid"
         :items="libraryList"
         :get-item-key="item => item.id || item.name"
         :min-item-width="240"
@@ -82,11 +83,14 @@ onActivated(() => {
 </template>
 
 <style scoped>
-.dashboard-card-grid-wrap {
-  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+.dashboard-media-grid {
   flex: 1 1 auto;
   min-block-size: 0;
-  overflow: auto;
-  padding: 0 0.75rem 0.75rem;
+}
+
+.dashboard-media-grid :deep(.progressive-card-grid__track) {
+  min-block-size: 100%;
 }
 </style>
diff --git a/src/views/dashboard/MediaServerPlaying.vue b/src/views/dashboard/MediaServerPlaying.vue
index 07bd26e9..a35ac164 100644
--- a/src/views/dashboard/MediaServerPlaying.vue
+++ b/src/views/dashboard/MediaServerPlaying.vue
@@ -66,8 +66,9 @@ onActivated(() => {
       <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
     </VCardItem>
 
-    <div class="dashboard-card-grid-wrap">
+    <div class="px-3 pb-3">
       <ProgressiveCardGrid
+        class="dashboard-media-grid"
         :items="playingList"
         :get-item-key="item => item.id || item.link || item.title"
         :min-item-width="240"
@@ -83,11 +84,14 @@ onActivated(() => {
 </template>
 
 <style scoped>
-.dashboard-card-grid-wrap {
-  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+.dashboard-media-grid {
   flex: 1 1 auto;
   min-block-size: 0;
-  overflow: auto;
-  padding: 0 0.75rem 0.75rem;
+}
+
+.dashboard-media-grid :deep(.progressive-card-grid__track) {
+  min-block-size: 100%;
 }
 </style>