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

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