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

This commit is contained in:
Ayaka Rizumu 2022-12-07 00:37:58 +08:00 committed by GitHub
parent 3b6b83ae7a
commit 7a07d21b76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 50 additions and 26 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 layoutsso 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"

View file

@ -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 />
<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 />
<span ws-nowrap>
{{ $t('notification.update_status') }}
</span>
</CommonMetaWrapper>
<StatusCard :status="notification.status!" :decorated="true" />
</template>

View file

@ -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 layoutsso 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>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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": {

View file

@ -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 {

View file

@ -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(),