fix main dialog width

src/components/AvatarInfo.vue

@@ -5,9 +5,9 @@
         /></span>
         <TooltipWrapper v-if="avatarTags">
             <template #content>
-                <span>{{ avatarTags }}</span>
+                <span class="truncate">{{ avatarTags }}</span>
             </template>
-            <span v-if="avatarTags" style="font-size: 12px" class="truncate">{{ avatarTags }}</span>
+            <span style="font-size: 12px" class="truncate">{{ avatarTags }}</span>
         </TooltipWrapper>
     </div>
 </template>

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <div class="w-223">
+        <DialogHeader class="sr-only">
+            <DialogTitle>{{ avatarDialog.ref?.name || t('dialog.avatar.info.header') }}</DialogTitle>
+            <DialogDescription>
+                {{ avatarDialog.ref?.description || avatarDialog.ref?.name || t('dialog.avatar.info.header') }}
+            </DialogDescription>
+        </DialogHeader>
         <div>
             <div class="flex">
                 <img
@@ -538,6 +544,7 @@
     } from 'lucide-vue-next';
     import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
+    import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="w-223">
         <DialogHeader class="sr-only">
             <DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
             <DialogDescription>
@@ -356,8 +356,8 @@
                             {{ t('dialog.group.info.instances') }}
                         </span>
                         <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
-                            <div style="margin: 5px 0" class="flex items-center">
-                                <Location :location="room.tag" />
+                            <div style="margin: 5px 0" class="flex flex-col">
+                                <Location :location="room.tag" class="text-sm" />
                                 <InstanceActionBar
                                     class="ml-1"
                                     :location="room.tag"

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="w-223">
         <DialogHeader class="sr-only">
             <DialogTitle>{{
                 userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="w-223">
         <DialogHeader class="sr-only">
             <DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
             <DialogDescription>