fix(webui): better display of edit recommended dialog on mobile

gotson · Feb 20, 2025 · d2aaf40 · d2aaf40
1 parent 4d3e6e4
commit d2aaf40
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/komga-webui/src/components/dialogs/EditRecommendedDialog.vue b/komga-webui/src/components/dialogs/EditRecommendedDialog.vue
@@ -1,14 +1,15 @@
 <template>
   <v-dialog v-model="modal"
             max-width="450"
+            :fullscreen="$vuetify.breakpoint.xsOnly"
   >
     <v-card>
       <v-card-title>{{ $t('dialog.edit_recommended.dialog_title') }}</v-card-title>
       <v-btn icon absolute top right @click="dialogClose">
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
-      <v-card-text>
+      <v-card-text :class="$vuetify.breakpoint.xsOnly ? 'px-0' : undefined">
         <v-list>
           <draggable
             v-model="localItems"
@@ -32,7 +33,7 @@
 
       <v-card-actions>
         <v-spacer/>
-        <v-btn text @click="dialogClose">{{ $t('common.cancel') }}</v-btn>
+        <v-btn v-if="$vuetify.breakpoint.smAndUp" text @click="dialogClose">{{ $t('common.cancel') }}</v-btn>
         <v-btn color="error" @click="resetToDefault">{{
             $t('dialog.edit_recommended.button_reset')
           }}