diff --git a/src/components/PostEditor/PostContent.tsx b/src/components/PostEditor/PostContent.tsx index 9f9237fa..6c3e7122 100644 --- a/src/components/PostEditor/PostContent.tsx +++ b/src/components/PostEditor/PostContent.tsx @@ -3379,7 +3379,7 @@ export default function PostContent({ )} -
+
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< 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' )} >
@@ -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 ? ( ) : ( diff --git a/src/index.css b/src/index.css index 939798b3..b6978a9e 100644 --- a/src/index.css +++ b/src/index.css @@ -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; } }