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>

components/help/HelpPreview.vue

@@ -39,8 +39,8 @@ const teams: Team[] = [
 </script>
 
 <template>
-  <div my-8 px-3 sm-px-8 flex="~ col gap-4" relative max-h-screen>
-    <button btn-action-icon absolute top-0 right-0 m1 aria-label="Close" @click="emit('close')">
+  <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative max-h-screen>
+    <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
       <div i-ri:close-fill />
     </button>
 

components/modal/ModalContainer.vue

@@ -9,13 +9,13 @@ import {
 </script>
 
 <template>
-  <ModalDialog v-model="isSigninDialogOpen" py-6 px-3 sm-px-6>
+  <ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
     <UserSignIn />
   </ModalDialog>
   <ModalDialog v-model="isPreviewHelpOpen">
     <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
-  <ModalDialog v-model="isPublishDialogOpen" max-w-180>
+  <ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160>
     <PublishWidget :draft-key="dialogDraftKey" expanded />
   </ModalDialog>
   <ModalDialog v-model="isMediaPreviewOpen" w-full max-w-full h-full max-h-full bg-transparent border-0 pointer-events-none>

components/modal/ModalDialog.vue

@@ -32,13 +32,13 @@ export interface Props {
    * keep the dialog opened even when in other views
    *
    * @default false
-   *
    */
   keepAlive?: boolean
 
   /** customizable class for the div outside of slot */
   customClass?: string
 }
+
 const props = withDefaults(defineProps<Props>(), {
   zIndex: 100,
   closeByMask: true,
@@ -144,7 +144,8 @@ export default {
         :style="{
           'z-index': zIndex,
         }"
-        class="scrollbar-hide" fixed inset-0 overflow-y-auto overscroll-none
+        class="scrollbar-hide"
+        fixed inset-0 overflow-y-auto overscroll-none
       >
         <!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
         <!-- corresponding to issue: #106, so please don't remove it. -->
@@ -159,13 +160,19 @@ export default {
             <!-- Dialog it self -->
             <div
               ref="elDialogMain"
-              class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full flex flex-col"
+              class="dialog-main"
+              rounded shadow-lg pointer-events-auto isolate bg-base
+              border="~ base" max-h-full flex flex-col
               v-bind="bindTypeToAny($attrs)"
             >
               <!-- header -->
               <slot name="header" />
               <!-- main -->
-              <div ref="elDialogScroll" class="overflow-y-auto touch-pan-y touch-pan-x overscroll-none flex-1" :class="customClass">
+              <div
+                ref="elDialogScroll"
+                overflow-y-auto touch-pan-y touch-pan-x overscroll-none
+                :class="customClass"
+              >
                 <slot />
               </div>
               <!-- footer -->

components/status/StatusAccountDetails.vue

@@ -13,7 +13,7 @@ const { account, link = true } = defineProps<{
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
-    <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+    <ContentRich font-bold ws-nowrap :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
     <AccountHandle :account="account" />
   </NuxtLink>
 </template>

components/status/StatusActionsMore.vue

@@ -93,8 +93,11 @@ function editStatus() {
   <CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command">
     <StatusActionButton
       :content="$t('action.more')"
-      color="text-purple" hover="text-purple" group-hover="bg-purple/10"
-      icon="i-ri:more-2-line"
+      color="text-purple"
+      hover="text-purple"
+      group-hover="bg-purple/10"
+      icon="i-ri:more-line"
+      my--2
     />
 
     <template #popper>

composables/masto.ts

@@ -30,7 +30,6 @@ export function getDisplayName(account?: Account, options?: { rich?: boolean })
   const displayName = account?.displayName || account?.username || ''
   if (options?.rich)
     return displayName
-
   return displayName.replace(/:([\w-]+?):/g, '')
 }