fix dialog layout

src/components/cards/MediaCard.vue

@@ -437,10 +437,12 @@ const getImgUrl = (url: string) => {
   <VDialog
     v-model="subscribeSeasonDialog"
     max-width="600"
-    content-class="m-1 whitespace-nowrap"
+    content-class="whitespace-nowrap"
+    scrollable
   >
     <!-- Dialog Content -->
     <VCard title="选择订阅季">
+      <VCardText style="padding: 0">
         <VDataTable
           v-model="seasonsSelected"
           :headers="seasonsHeaders"
@@ -451,6 +453,7 @@ const getImgUrl = (url: string) => {
           show-select
           :items-per-page="100"
           density="compact"
+          height="auto"
         >
           <template #item.title="{ item }">
             <span class="d-block whitespace-nowrap"
@@ -475,8 +478,9 @@ const getImgUrl = (url: string) => {
           <template #no-data> 没有数据 </template>
           <template #bottom></template>
         </VDataTable>
-
+      </VCardText>
       <VCardActions>
+        <VBtn @click="subscribeSeasonDialog = false"> 取消 </VBtn>
         <VSpacer />
         <VBtn @click="subscribeSeasons" @keydown.enter="subscribeSeasons"> 确定 </VBtn>
       </VCardActions>

src/styles/styles.scss

@@ -37,6 +37,16 @@
 }
 
 .v-dialog > .v-overlay__content {
-  margin-top: calc(env(safe-area-inset-top) + 1rem) !important;
-  max-height: calc(100% - env(safe-area-inset-top) - 2rem) !important;
+  margin-top: calc(env(safe-area-inset-top) + 1rem);
+  max-height: calc(100% - env(safe-area-inset-top) - 1rem);
+}
+
+.v-dialog > .v-overlay__content{
+  width: calc(100% - 1rem);
+}
+
+.v-dialog--fullscreen > .v-overlay__content{
+  margin-top: env(safe-area-inset-top);
+  max-height: calc(100% - env(safe-area-inset-top));
+  width: 100%;
 }