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

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 />