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

2024-11-24 18:26:17 +03:00 · 2022-12-07 00:37:58 +08:00 · 2022-12-07 00:37:58 +08:00 · 7a07d21b76
commit 7a07d21b76
parent 3b6b83ae7a
16 changed files with 50 additions and 26 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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 />
--- 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
--- 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": {
--- 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 {
--- 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(),