From 7a07d21b7651983e2d10be61735905010fc6c1cc Mon Sep 17 00:00:00 2001
From: Ayaka Rizumu <464388324@qq.com>
Date: Wed, 7 Dec 2022 00:37:58 +0800
Subject: [PATCH] fix: style overflow due to user content (#355)

---
 components/account/AccountHeader.vue         |  4 ++--
 components/account/AccountInfo.vue           |  6 +++++-
 components/account/AccountInlineInfo.vue     |  6 +++++-
 components/common/CommonMetaWrapper.vue      |  2 +-
 components/conversation/ConversationCard.vue |  2 +-
 components/modal/ModalContainer.vue          |  3 ++-
 components/notification/NotificationCard.vue |  8 ++++++--
 components/publish/PublishWidget.vue         | 10 +++++-----
 components/status/StatusAccountDetails.vue   |  6 +++++-
 components/status/StatusCard.vue             |  6 +++---
 components/status/StatusReplyingTo.vue       |  6 +++---
 components/status/edit/StatusEditPreview.vue |  6 ++++--
 components/user/UserSwitcher.vue             |  2 +-
 locales/en-US.json                           |  2 ++
 styles/global.css                            |  3 ++-
 unocss.config.ts                             |  4 +++-
 16 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index cbfd137b..040c5fee 100644
--- a/components/account/AccountHeader.vue
+++ b/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>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index bc196dee..1b9f9679 100644
--- a/components/account/AccountInfo.vue
+++ b/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>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index f277b699..ba036178 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/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>
diff --git a/components/common/CommonMetaWrapper.vue b/components/common/CommonMetaWrapper.vue
index c5bbcafc..d9aef409 100644
--- a/components/common/CommonMetaWrapper.vue
+++ b/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>
diff --git a/components/conversation/ConversationCard.vue b/components/conversation/ConversationCard.vue
index d274fa63..faf94255 100644
--- a/components/conversation/ConversationCard.vue
+++ b/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>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index c7dd1911..24f179c4 100644
--- a/components/modal/ModalContainer.vue
+++ b/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"
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index 16b5766b..bc3bb307 100644
--- a/components/notification/NotificationCard.vue
+++ b/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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 668e1aae..3aa82d70 100644
--- a/components/publish/PublishWidget.vue
+++ b/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 h-0 flex-1>
+    <div flex gap-4 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 h-0 flex-1 flex flex-col>
+        <div relative 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>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index a08a7d46..01adc82d 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index aac23c8a..a7527f70 100644
--- a/components/status/StatusCard.vue
+++ b/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>
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 4623b6ef..e94cdb2f 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/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>
diff --git a/components/status/edit/StatusEditPreview.vue b/components/status/edit/StatusEditPreview.vue
index 51867c19..92c18b0b 100644
--- a/components/status/edit/StatusEditPreview.vue
+++ b/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 />
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index b63f710c..6edb6845 100644
--- a/components/user/UserSwitcher.vue
+++ b/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
diff --git a/locales/en-US.json b/locales/en-US.json
index a20b9db0..3526b5ce 100644
--- a/locales/en-US.json
+++ b/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": {
diff --git a/styles/global.css b/styles/global.css
index 7f680bb2..771253c2 100644
--- a/styles/global.css
+++ b/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 {
diff --git a/unocss.config.ts b/unocss.config.ts
index 9a6855e1..aeccc925 100644
--- a/unocss.config.ts
+++ b/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(),