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;
}
}