Browse Source

fix post editor

imwald
Silberengel 1 week ago
parent
commit
905e0e7e8a
  1. 4
      src/components/PostEditor/PostContent.tsx
  2. 12
      src/components/PostEditor/PostTextarea/index.tsx
  3. 13
      src/index.css

4
src/components/PostEditor/PostContent.tsx

@ -3379,7 +3379,7 @@ export default function PostContent({ @@ -3379,7 +3379,7 @@ export default function PostContent({
</div>
)}
<div className={cn(isSmallScreen && 'flex min-h-0 min-w-0 flex-1 flex-col')}>
<div className={cn(isSmallScreen && 'flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden')}>
<PostTextarea
ref={textareaRef}
text={text}
@ -3391,7 +3391,7 @@ export default function PostContent({ @@ -3391,7 +3391,7 @@ export default function PostContent({
isPoll
? 'min-h-20'
: isSmallScreen
? 'min-h-[min(42vh,20rem)]'
? 'min-h-0'
: 'min-h-52',
isDiscussionThread && threadErrors.content && 'border-destructive'
)}

12
src/components/PostEditor/PostTextarea/index.tsx

@ -180,9 +180,10 @@ const PostTextarea = forwardRef< @@ -180,9 +180,10 @@ const PostTextarea = forwardRef<
() =>
cn(
'border rounded-lg p-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
isSmallScreen && 'min-h-0 flex-1 overflow-y-auto overscroll-y-contain',
className
),
[className]
[className, isSmallScreen]
)
const editor = useEditor({
@ -325,7 +326,7 @@ const PostTextarea = forwardRef< @@ -325,7 +326,7 @@ const PostTextarea = forwardRef<
value={activeTab}
onValueChange={setActiveTab}
className={cn(
isSmallScreen ? 'flex min-h-0 flex-1 flex-col gap-2' : 'space-y-2'
isSmallScreen ? 'flex min-h-0 flex-1 flex-col gap-2 overflow-hidden' : 'space-y-2'
)}
>
<div className="flex min-w-0 shrink-0 flex-col gap-2">
@ -348,12 +349,15 @@ const PostTextarea = forwardRef< @@ -348,12 +349,15 @@ const PostTextarea = forwardRef<
forceMount
className={cn(
'mt-0 data-[state=inactive]:hidden focus-visible:ring-0 focus-visible:ring-offset-0',
isSmallScreen && 'flex min-h-0 flex-1 flex-col'
isSmallScreen && 'flex min-h-0 flex-1 flex-col overflow-hidden'
)}
>
{editor ? (
<EditorContent
className={cn('tiptap', isSmallScreen && 'flex min-h-0 flex-1 flex-col')}
className={cn(
'tiptap',
isSmallScreen && 'flex min-h-0 flex-1 flex-col overflow-hidden'
)}
editor={editor}
/>
) : (

13
src/index.css

@ -103,8 +103,17 @@ @@ -103,8 +103,17 @@
}
@media (max-width: 768px) {
.tiptap .ProseMirror {
min-height: min(42vh, 20rem);
/* Mobile composer: scroll inside the bordered editor instead of painting past it. */
.tiptap.flex-col {
min-height: 0;
}
.tiptap.flex-col .ProseMirror {
min-height: 0;
max-height: 100%;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
overflow-wrap: anywhere;
}
}

Loading…
Cancel
Save