💄 Optimized most of components for moblie

src/components/realms/RealmDeletion.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card title="Delete a realm" :loading="loading">
+  <v-card title="Delete a realm" class="min-h-[540px]" :loading="loading">
     <template #text>
       You are deleting a realm
       <b>{{ realms.related.delete_to?.name }}</b> <br />

src/components/realms/RealmEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card title="Organize a realm" prepend-icon="mdi-account-multiple" :loading="loading">
+  <v-card title="Organize a realm" prepend-icon="mdi-account-multiple" class="min-h-[540px]" :loading="loading">
     <v-form @submit.prevent="submit">
       <v-card-text>
         <v-text-field label="Name" variant="outlined" density="comfortable" v-model="data.name" />

src/components/realms/RealmTools.vue

@@ -1,16 +1,16 @@
 <template>
-  <v-dialog v-model="realms.show.editor" class="max-w-[540px]">
+  <v-bottom-sheet v-model="realms.show.editor">
     <realm-editor @relist="realms.list" />
-  </v-dialog>
-  <v-dialog v-model="realms.show.delete" class="max-w-[540px]">
+  </v-bottom-sheet>
+  <v-bottom-sheet v-model="realms.show.delete">
     <realm-deletion @relist="realms.list" />
-  </v-dialog>
+  </v-bottom-sheet>
 </template>
 
 <script setup lang="ts">
 import { useRealms } from "@/stores/realms"
 import RealmEditor from "@/components/realms/RealmEditor.vue"
-import RealmDeletion from "./RealmDeletion.vue"
+import RealmDeletion from "@/components/realms/RealmDeletion.vue"
 
 const realms = useRealms()
 </script>