feat(dashboard): improve layout and styling for media components

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>

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 {
+/* stylelint-disable selector-pseudo-class-no-unknown */
-  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+
+.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>

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 {
+/* stylelint-disable selector-pseudo-class-no-unknown */
-  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+
+.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>

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 {
+/* stylelint-disable selector-pseudo-class-no-unknown */
-  /* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
+
+.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>