feat: dialog ui

components/account/AccountHandle.vue

@@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
 </script>
 
 <template>
-  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light>
+  <p ws-nowrap text-ellipsis of-hidden text-secondary-light>
     <span text-secondary>{{ getShortHandle(account) }}</span>
     <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
   </p>

components/account/AccountHeader.vue

@@ -100,7 +100,11 @@ watchEffect(() => {
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>
-            <ContentRich font-bold text-2xl break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+            <ContentRich
+              font-bold text-2xl ws-nowrap
+              :content="getDisplayName(account, { rich: true })"
+              :emojis="account.emojis"
+            />
             <AccountHandle :account="account" />
           </div>
         </div>

components/account/AccountInlineInfo.vue

@@ -15,7 +15,7 @@ const { link = true } = defineProps<{
       min-w-0 flex gap-1 items-center
     >
       <AccountAvatar :account="account" w-5 h-5 />
-      <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <ContentRich ws-nowrap :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>