improve dialog layout

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="w-223">
+    <div class="w-223 flex-1 min-h-0 flex flex-col">
         <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">
+        <div class="flex-1 min-h-0 flex flex-col">
+            <div class="flex flex-shrink-0">
                 <div style="flex: none; width: 160px; height: 120px">
                     <img
                         v-if="!imageError"
@@ -320,6 +320,7 @@
                 v-model="avatarDialog.activeTab"
                 :items="avatarDialogTabs"
                 :unmount-on-hide="false"
+                fill
                 @update:modelValue="avatarDialogTabClick">
                 <template #Info>
                     <div class="flex flex-wrap items-start px-2.5" style="max-height: unset">
@@ -584,7 +585,6 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
-
     import {
         useAuthStore,
         useAvatarStore,

src/components/dialogs/GroupDialog/GroupDialog.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="w-223">
+    <div class="w-223 flex-1 min-h-0 flex flex-col">
         <DialogHeader class="sr-only">
             <DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
             <DialogDescription>
                 {{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
             </DialogDescription>
         </DialogHeader>
-        <div>
-            <div style="display: flex">
+        <div class="flex-1 min-h-0 flex flex-col">
+            <div class="flex-shrink-0" style="display: flex">
                 <div style="flex: none; width: 120px; height: 120px">
                     <img
                         v-if="!groupDialog.loading && !imageError"
@@ -341,6 +341,7 @@
                 v-model="groupDialog.activeTab"
                 :items="groupDialogTabs"
                 :unmount-on-hide="false"
+                fill
                 @update:modelValue="groupDialogTabClick">
                 <template #Info>
                     <GroupDialogInfoTab

src/components/dialogs/MainDialogContainer.vue

@@ -109,11 +109,11 @@
     const dialogClass = computed(() => {
         switch (activeType.value) {
             case 'world':
-                return 'x-dialog x-world-dialog translate-y-0 sm:max-w-235';
+                return 'x-dialog translate-y-0 sm:max-w-235 overflow-hidden flex flex-col';
             case 'avatar':
-                return 'x-dialog x-avatar-dialog sm:max-w-235 translate-y-0';
+                return 'x-dialog sm:max-w-235 translate-y-0 overflow-hidden flex flex-col';
             case 'group':
-                return 'x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235';
+                return 'x-dialog translate-y-0 sm:max-w-235 overflow-hidden flex flex-col';
             case 'previous-instances-info':
             case 'previous-instances-user':
             case 'previous-instances-world':
@@ -121,7 +121,7 @@
                 return 'x-dialog translate-y-0 sm:max-w-250';
             case 'user':
             default:
-                return 'x-dialog x-user-dialog sm:max-w-235 translate-y-0';
+                return 'x-dialog sm:max-w-235 translate-y-0 overflow-hidden flex flex-col';
         }
     });
 
@@ -149,7 +149,7 @@
 <template>
     <Dialog v-if="isOpen" v-model:open="isOpen">
         <DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
-            <Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
+            <Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2 flex-shrink-0">
                 <BreadcrumbList>
                     <TooltipWrapper :content="backCrumbLabel" :disabled="!backCrumbLabel" :delayDuration="500">
                         <Button variant="ghost" size="icon-sm" @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-223">
+    <div class="w-223 flex-1 min-h-0 flex flex-col">
         <DialogHeader class="sr-only">
             <DialogTitle>{{
                 userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')
@@ -7,6 +7,7 @@
             <DialogDescription>{{ getUserStateText(userDialog.ref || {}) }}</DialogDescription>
         </DialogHeader>
         <UserSummaryHeader
+            class="flex-shrink-0"
             :get-user-state-text="getUserStateText"
             :copy-user-display-name="copyUserDisplayName"
             :toggle-badge-visibility="toggleBadgeVisibility"
@@ -17,6 +18,7 @@
             v-model="userDialog.activeTab"
             :items="userDialogTabs"
             :unmount-on-hide="false"
+            fill
             @update:modelValue="userDialogTabClick">
             <template #Info>
                 <UserDialogInfoTab ref="infoTabRef" @show-bio-dialog="showBioDialog" />

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="w-223">
+    <div class="w-223 flex-1 min-h-0 flex flex-col">
         <DialogHeader class="sr-only">
             <DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
             <DialogDescription>
                 {{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
             </DialogDescription>
         </DialogHeader>
-        <div>
-            <div style="display: flex">
+        <div class="flex-1 min-h-0 flex flex-col">
+            <div class="flex-shrink-0" style="display: flex">
                 <div style="flex: none; width: 160px; height: 120px">
                     <img
                         v-if="!worldDialog.loading && !imageError"
@@ -313,6 +313,7 @@
                 v-model="worldDialog.activeTab"
                 :items="worldDialogTabs"
                 :unmount-on-hide="false"
+                fill
                 @update:modelValue="worldDialogTabClick">
                 <template #Instances>
                     <WorldDialogInstancesTab />

src/components/ui/dialog/DialogContent.vue

@@ -72,8 +72,8 @@
             :class="
                 cn(
                     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-                    props.class,
-                    'max-h-[85vh] overflow-y-auto scrollbar-hidden'
+                    'max-h-[85vh] overflow-y-auto scrollbar-hidden',
+                    props.class
                 )
             ">
             <slot />

src/components/ui/tabs/TabsUnderline.vue

@@ -21,11 +21,12 @@
 
         variant: { type: String, default: 'fit' },
         unmountOnHide: { type: Boolean, default: false },
-        fill: { type: Boolean, default: false }
+        fill: { type: Boolean, default: false },
+        sticky: { type: Boolean, default: false }
     });
 
     const emit = defineEmits(['update:modelValue']);
-    const { modelValue, defaultValue, items, ariaLabel, variant, unmountOnHide, fill } = toRefs(props);
+    const { modelValue, defaultValue, items, ariaLabel, variant, unmountOnHide, fill, sticky } = toRefs(props);
 
     const itemsList = computed(() => (Array.isArray(items.value) ? items.value : []));
 
@@ -74,7 +75,8 @@
     const listClass = computed(() => {
         return [
             'relative flex w-full items-center gap-1 border-b border-border',
-            variant.value === 'pill' ? 'rounded-full bg-muted p-1' : ''
+            variant.value === 'pill' ? 'rounded-full bg-muted p-1' : '',
+            sticky.value ? 'sticky top-0 z-10 bg-background' : ''
         ].join(' ');
     });
 </script>