💄 Optimized most of components for moblie

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>