fix: style overflow due to user content (#355)

components/account/AccountHeader.vue

@@ -101,14 +101,14 @@ watchEffect(() => {
           </button>
           <div flex flex-col>
             <ContentRich
-              font-bold text-2xl ws-nowrap
+              font-bold sm:text-2xl text-xl
               :content="getDisplayName(account, { rich: true })"
               :emojis="account.emojis"
             />
             <AccountHandle :account="account" />
           </div>
         </div>
-        <div absolute top="1/2" right-0 translate-y="-1/2" flex gap-2 items-center>
+        <div absolute top-18 right-0 flex gap-2 items-center>
           <AccountMoreButton :account="account" :command="command" />
           <AccountFollowButton :account="account" :command="command" />
           <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>

components/account/AccountInfo.vue

@@ -20,7 +20,11 @@ defineOptions({
       <AccountAvatar :account="account" w-12 h-12 />
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden>
-      <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" overflow-hidden truncate text-ellipsis />
+      <ContentRich
+        font-bold line-clamp-1 ws-pre-wrap break-all
+        :content="getDisplayName(account, { rich: true })"
+        :emojis="account.emojis"
+      />
       <AccountHandle :account="account" text-sm text-secondary-light />
     </div>
   </component>

components/account/AccountInlineInfo.vue

@@ -16,7 +16,11 @@ const { link = true, avatar = true } = defineProps<{
       min-w-0 flex gap-1 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
-      <ContentRich ws-nowrap :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
+      <ContentRich
+        line-clamp-1 ws-pre-wrap break-all
+        :content="getDisplayName(account, { rich: true })"
+        :emojis="account.emojis"
+      />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>

components/common/CommonMetaWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div flex="~ wrap" gap-1 items-center absolute top-0 pt-2 left-0 px-3>
+  <div flex="~" gap-1 items-center absolute top-0 pt-2 left-0 px-3>
     <slot />
   </div>
 </template>

components/conversation/ConversationCard.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 
 <template>
   <article flex flex-col gap-2>
-    <div flex gap-2 flex-wrap text-sm px-2>
+    <div flex gap-2 text-sm px-2>
       {{ $t('conversation.with') }}
       <AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
     </div>

components/modal/ModalContainer.vue

@@ -16,7 +16,8 @@ import {
     <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
   <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
-    <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 />
+    <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
+    <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 w-0 />
   </ModalDialog>
   <ModalDialog
     v-model="isMediaPreviewOpen"

components/notification/NotificationCard.vue

@@ -12,7 +12,9 @@ const { notification } = defineProps<{
       <div flex ml-4 items-center absolute class="-top-2.5" right-2 px-2>
         <div i-ri:user-follow-fill mr-1 color-primary />
         <AccountInlineInfo :account="notification.account" mr1 />
-        {{ $t('notification.followed_you') }}
+        <span ws-nowrap>
+          {{ $t('notification.followed_you') }}
+        </span>
       </div>
       <AccountCard :account="notification.account" />
     </template>
@@ -42,7 +44,9 @@ const { notification } = defineProps<{
       <CommonMetaWrapper>
         <div i-ri:edit-2-fill mr-1 text-secondary />
         <AccountInlineInfo :account="notification.account" mr1 />
-        {{ $t('notification.update_status') }}
+        <span ws-nowrap>
+          {{ $t('notification.update_status') }}
+        </span>
       </CommonMetaWrapper>
       <StatusCard :status="notification.status!" :decorated="true" />
     </template>

components/publish/PublishWidget.vue

@@ -159,14 +159,14 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
       <div border="b dashed gray/40" />
     </template>
 
-    <!-- The h-0 flex-1 here is to avoid the scrolling failure problem that occurs with flex layouts, so don't remove it unless you know what you're doing  -->
+    <div flex gap-4 flex-1>
-    <div flex gap-4 h-0 flex-1>
       <NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)">
         <AccountAvatar :account="currentUser.account" f-full h-full />
       </NuxtLink>
+      <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
       <div
         ref="dropZoneRef"
-        flex flex-col gap-3 flex-1
+        flex w-0 flex-col gap-3 flex-1
         border="2 dashed transparent"
         :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
       >
@@ -180,11 +180,11 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
           >
         </div>
 
-        <!-- The h-0 flex-1 here is to avoid the scrolling failure problem that occurs with flex layouts, so don't remove it unless you know what you're doing  -->
+        <div relative flex-1 flex flex-col>
-        <div relative h-0 flex-1 flex flex-col>
           <EditorContent
             :editor="editor"
             flex
+            class="max-w-100%"
             :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
           />
           <div v-if="shouldExpanded" absolute right-0 bottom-0 pointer-events-none text-sm text-secondary-light>

components/status/StatusAccountDetails.vue

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

components/status/StatusCard.vue

@@ -62,7 +62,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
 <template>
   <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-2 px-4 pt-3 pb-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
     <StatusReplyingTo v-if="showReplyTo" :status="status" />
-    <CommonMetaWrapper v-if="rebloggedBy" text-secondary text-sm>
+    <CommonMetaWrapper v-if="rebloggedBy" text-secondary text-sm ws-nowrap>
       <div i-ri:repeat-fill mr-1 text-primary />
       <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
     </CommonMetaWrapper>
@@ -79,7 +79,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
         </div>
       </div>
       <div flex="~ col 1" min-w-0>
-        <div flex items-center>
+        <div flex items-center space-x-1>
           <AccountHoverWrapper :account="status.account">
             <StatusAccountDetails :account="status.account" />
           </AccountHoverWrapper>
@@ -87,7 +87,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
           <div v-if="!isZenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
             <CommonTooltip :content="createdAt">
               <a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
-                <time text-sm hover:underline :datetime="status.createdAt">
+                <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
                   {{ timeago }}
                 </time>
               </a>

components/status/StatusReplyingTo.vue

@@ -12,16 +12,16 @@ const account = useAccountById(status.inReplyToAccountId!)
   <div v-if="status.inReplyToAccountId" absolute top-0 pt-2 right-0 px-4 flex="~ wrap" gap-1>
     <NuxtLink
       v-if="status.inReplyToId"
-      flex="~ wrap" items-center font-bold text-sm text-secondary gap-1
+      flex="~" items-center font-bold text-sm text-secondary gap-1
       :to="getStatusInReplyToRoute(status)"
       :title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
     >
       <div i-ri:reply-fill class="scale-x-[-1]" text-secondary-light />
       <template v-if="account?.id !== status.account.id">
         <AccountInlineInfo v-if="account" :account="account" :link="false" />
-        <span v-else>Someone</span>
+        <span v-else ws-nowrap>{{ $t('status.someone') }}</span>
       </template>
-      <span v-else>Thread</span>
+      <span v-else ws-nowrap>{{ $t('status.thread') }}</span>
       <div i-ph:chats-fill text-primary text-lg />
     </NuxtLink>
   </div>

components/status/edit/StatusEditPreview.vue

@@ -8,9 +8,11 @@ const { edit } = defineProps<{
 
 <template>
   <div px3 py-4 flex="~ col">
-    <div text-center flex="~ row gap-1">
+    <div text-center flex="~ row gap-1 wrap">
       <AccountInlineInfo :account="edit.account" />
-      edited {{ useFormattedDateTime(edit.createdAt).value }}
+      <span>
+        {{ $t('status_history.edited', [useFormattedDateTime(edit.createdAt).value]) }}
+      </span>
     </div>
 
     <div h1px bg="gray/20" my2 />

components/user/UserSwitcher.vue

@@ -20,7 +20,7 @@ const switchUser = (user: UserLogin) => {
 </script>
 
 <template>
-  <div min-w-80 mxa py2 flex="~ col">
+  <div sm:min-w-80 max-w-100vw mxa py2 flex="~ col">
     <template v-for="user of sorted" :key="user.id">
       <button
         flex rounded px4 py3 text-left

locales/en-US.json

@@ -160,8 +160,10 @@
       "finished": "finished {0}"
     },
     "reblogged": "{0} reblogged",
+    "someone": "Someone",
     "spoiler_show_less": "Show less",
     "spoiler_show_more": "Show more",
+    "thread": "Thread",
     "try_original_site": "Try original site"
   },
   "status_history": {

styles/global.css

@@ -56,7 +56,7 @@ body {
       --at-apply: 'hidden';
     }
     .ellipsis {
-      --at-apply: 'truncate overflow-hidden ws-nowrap';
+      --at-apply: 'line-clamp-1 ws-pre-wrap break-all';
       &::after {
         content: '…';
       }
@@ -86,6 +86,7 @@ body {
 
 .content-editor {
   --at-apply: outline-none flex-1;
+  max-width: 100%;
 }
 
 .content-editor.content-rich {

unocss.config.ts

@@ -53,7 +53,9 @@ export default defineConfig({
     presetIcons({
       scale: 1.2,
       extraProperties: {
-        color: 'inherit',
+        'color': 'inherit',
+        // Avoid crushing of icons in crowded situations
+        'min-width': '1.2em',
       },
     }),
     presetTypography(),