From d23f0d4401904fac81952bde1735449555a6ee85 Mon Sep 17 00:00:00 2001
From: rebelchris <chrisbongers@gmail.com>
Date: Sat, 28 Mar 2026 05:26:36 +0000
Subject: [PATCH 1/2] fix(shared): resolve mobile comment modal overflow

---
 .../modals/post/CommentModal.spec.tsx         | 228 ++++++++++++++++++
 .../components/modals/post/CommentModal.tsx   |  62 ++++-
 2 files changed, 278 insertions(+), 12 deletions(-)
 create mode 100644 packages/shared/src/components/modals/post/CommentModal.spec.tsx

diff --git a/packages/shared/src/components/modals/post/CommentModal.spec.tsx b/packages/shared/src/components/modals/post/CommentModal.spec.tsx
new file mode 100644
index 00000000000..0eb37bd7b63
--- /dev/null
+++ b/packages/shared/src/components/modals/post/CommentModal.spec.tsx
@@ -0,0 +1,228 @@
+import React, { type ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import CommentModal, { getCommentInputMinHeight } from './CommentModal';
+import Post from '../../../../__tests__/fixture/post';
+import loggedUser from '../../../../__tests__/fixture/loggedUser';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import useCommentById from '../../../hooks/comments/useCommentById';
+import { useNotificationToggle } from '../../../hooks/notifications';
+import { useMutateComment } from '../../../hooks/post/useMutateComment';
+import { useVisualViewport } from '../../../hooks/utils/useVisualViewport';
+
+jest.mock('../common/Modal', () => {
+  const mockReact = jest.requireActual('react') as typeof React;
+
+  const MockModalBody = mockReact.forwardRef<
+    HTMLElement,
+    { children: ReactNode; className?: string }
+  >(({ children, className }, ref) => (
+    <section className={className} data-testid="modal-body" ref={ref}>
+      {children}
+    </section>
+  ));
+
+  MockModalBody.displayName = 'MockModalBody';
+
+  const Modal = ({ children }: { children: ReactNode }) => (
+    <div data-testid="modal">{children}</div>
+  );
+
+  Modal.Body = MockModalBody;
+
+  return { Modal };
+});
+
+jest.mock('../../comments/CommentContainer', () => ({
+  __esModule: true,
+  default: () => <div data-testid="comment-container" />,
+}));
+
+jest.mock('../../fields/Switch', () => {
+  const mockReact = jest.requireActual('react') as typeof React;
+
+  const MockSwitch = mockReact.forwardRef<
+    HTMLLabelElement,
+    {
+      children: ReactNode;
+      className?: string;
+      labelClassName?: string;
+    }
+  >(({ children, className, labelClassName }, ref) => (
+    <label
+      className={className}
+      data-testid="notification-switch"
+      htmlFor="notification-switch-input"
+      ref={ref}
+    >
+      <span className={labelClassName}>{children}</span>
+      <input id="notification-switch-input" type="checkbox" />
+    </label>
+  ));
+
+  MockSwitch.displayName = 'MockSwitch';
+
+  return {
+    Switch: MockSwitch,
+  };
+});
+
+jest.mock('../../fields/MarkdownInput/CommentMarkdownInput', () => {
+  const mockReact = jest.requireActual('react') as typeof React;
+
+  const MockCommentMarkdownInput = mockReact.forwardRef<
+    HTMLFormElement,
+    {
+      className?: Record<string, string>;
+      formProps?: Record<string, string>;
+    }
+  >(({ className, formProps }, ref) => (
+    <form
+      {...formProps}
+      className={className?.container}
+      data-testid="comment-form"
+      ref={ref}
+    >
+      <div
+        className={className?.markdownContainer}
+        data-testid="markdown-container"
+      >
+        <textarea
+          aria-label="Share your thoughts"
+          className={className?.input}
+        />
+      </div>
+    </form>
+  ));
+
+  MockCommentMarkdownInput.displayName = 'MockCommentMarkdownInput';
+
+  return {
+    CommentMarkdownInput: MockCommentMarkdownInput,
+  };
+});
+
+jest.mock('../../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(),
+}));
+
+jest.mock('../../../hooks/post/useMutateComment', () => ({
+  useMutateComment: jest.fn(),
+}));
+
+jest.mock('../../../hooks/utils/useVisualViewport', () => ({
+  useVisualViewport: jest.fn(),
+}));
+
+jest.mock('../../../hooks/notifications', () => ({
+  useNotificationToggle: jest.fn(),
+}));
+
+jest.mock('../../../hooks/comments/useCommentById', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const mockUseAuthContext = useAuthContext as jest.Mock;
+const mockUseMutateComment = useMutateComment as jest.Mock;
+const mockUseVisualViewport = useVisualViewport as jest.Mock;
+const mockUseNotificationToggle = useNotificationToggle as jest.Mock;
+const mockUseCommentById = useCommentById as jest.Mock;
+
+const defaultProps = {
+  isOpen: true,
+  onRequestClose: jest.fn(),
+  post: Post,
+};
+
+const renderComponent = () => {
+  const client = new QueryClient();
+
+  return render(
+    <QueryClientProvider client={client}>
+      <CommentModal {...defaultProps} />
+    </QueryClientProvider>,
+  );
+};
+
+describe('CommentModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAuthContext.mockReturnValue({ user: loggedUser });
+    mockUseMutateComment.mockReturnValue({
+      mutateComment: jest.fn(),
+      isLoading: false,
+      isSuccess: false,
+    });
+    mockUseVisualViewport.mockReturnValue({ height: 220 });
+    mockUseNotificationToggle.mockReturnValue({
+      shouldShowCta: true,
+      isEnabled: true,
+      onToggle: jest.fn(),
+      onSubmitted: jest.fn(),
+    });
+    mockUseCommentById.mockReturnValue({ comment: null });
+  });
+
+  it('should keep the mobile modal background on the scroll surface', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('modal-body')).toHaveClass(
+      'bg-background-default',
+    );
+  });
+
+  it('should size the comment form to the available viewport height without forcing 300px', () => {
+    const { rerender } = renderComponent();
+    const header = screen.getByRole('button', { name: 'Cancel' }).parentElement;
+    const notificationSwitch = screen.getByTestId('notification-switch');
+
+    if (!header) {
+      throw new Error('Expected comment modal header to be rendered');
+    }
+
+    Object.defineProperty(header, 'offsetHeight', {
+      configurable: true,
+      value: 48,
+    });
+    Object.defineProperty(notificationSwitch, 'clientHeight', {
+      configurable: true,
+      value: 40,
+    });
+
+    rerender(
+      <QueryClientProvider client={new QueryClient()}>
+        <CommentModal {...defaultProps} />
+      </QueryClientProvider>,
+    );
+
+    expect(screen.getByTestId('comment-form')).toHaveStyle({
+      height: 'auto',
+      minHeight: '132px',
+    });
+  });
+});
+
+describe('getCommentInputMinHeight', () => {
+  it('should return the remaining viewport height', () => {
+    expect(
+      getCommentInputMinHeight({
+        viewportHeight: 640,
+        headerHeight: 48,
+        replyHeight: 24,
+        footerHeight: 40,
+      }),
+    ).toBe(528);
+  });
+
+  it('should return undefined when the viewport is fully consumed', () => {
+    expect(
+      getCommentInputMinHeight({
+        viewportHeight: 100,
+        headerHeight: 60,
+        replyHeight: 20,
+        footerHeight: 20,
+      }),
+    ).toBeUndefined();
+  });
+});
diff --git a/packages/shared/src/components/modals/post/CommentModal.tsx b/packages/shared/src/components/modals/post/CommentModal.tsx
index f25a984414a..e7c1024440e 100644
--- a/packages/shared/src/components/modals/post/CommentModal.tsx
+++ b/packages/shared/src/components/modals/post/CommentModal.tsx
@@ -55,6 +55,13 @@ interface GetCommentFromCacheProps {
   commentId?: string;
 }
 
+interface GetCommentInputMinHeightProps {
+  viewportHeight?: number;
+  headerHeight: number;
+  replyHeight: number;
+  footerHeight: number;
+}
+
 const getCommentFromCache = ({
   client,
   postId,
@@ -80,6 +87,22 @@ const getCommentFromCache = ({
   return undefined;
 };
 
+export const getCommentInputMinHeight = ({
+  viewportHeight = 0,
+  headerHeight,
+  replyHeight,
+  footerHeight,
+}: GetCommentInputMinHeightProps): number | undefined => {
+  const availableHeight =
+    viewportHeight - headerHeight - replyHeight - footerHeight;
+
+  if (availableHeight <= 0) {
+    return undefined;
+  }
+
+  return availableHeight;
+};
+
 export interface CommentModalProps
   extends LazyModalCommonProps,
     CommentMarkdownInputProps {
@@ -170,15 +193,29 @@ export default function CommentModal({
   const replyHeight = replyRef.current?.clientHeight ?? 0;
   const footerHeight = switchRef.current?.clientHeight ?? 0;
   const headerHeight = headerRef.current?.offsetHeight ?? 0;
-  const totalHeight = height - headerHeight - replyHeight - footerHeight;
-  const inputHeight = totalHeight > 0 ? Math.max(totalHeight, 300) : 'auto';
+  const inputMinHeight = getCommentInputMinHeight({
+    viewportHeight: height,
+    headerHeight,
+    replyHeight,
+    footerHeight,
+  });
 
-  if (
-    inputRef.current &&
-    inputRef.current.style?.height !== `${inputHeight}px`
-  ) {
-    inputRef.current.style.height = `${inputHeight}px`;
-  }
+  useLayoutEffect(() => {
+    const inputNode = inputRef.current;
+
+    if (!inputNode) {
+      return;
+    }
+
+    if (!inputMinHeight) {
+      inputNode.style.removeProperty('height');
+      inputNode.style.removeProperty('min-height');
+      return;
+    }
+
+    inputNode.style.height = 'auto';
+    inputNode.style.minHeight = `${inputMinHeight}px`;
+  }, [inputMinHeight]);
 
   const { submitCopy, initialContent } = useMemo(() => {
     if (isEdit) {
@@ -217,7 +254,7 @@ export default function CommentModal({
       className="!border-none"
       overlayClassName="!touch-none"
     >
-      <Modal.Body className="!p-0" ref={refCallback}>
+      <Modal.Body className="bg-background-default !p-0" ref={refCallback}>
         <WriteCommentContext.Provider
           value={{ mutateComment: mutateCommentResult }}
         >
@@ -235,7 +272,8 @@ export default function CommentModal({
               disabled: isSuccess,
             }}
             className={{
-              container: 'flex-1 first:!border-none',
+              container:
+                'min-h-full flex-1 bg-background-default first:!border-none',
               header: 'sticky top-0 z-2 w-full bg-background-default',
             }}
             headerRef={headerRef}
@@ -270,9 +308,9 @@ export default function CommentModal({
               editCommentId={isEdit && editCommentId}
               initialContent={initialContent}
               className={{
-                markdownContainer: 'flex-1',
+                markdownContainer: 'min-h-0 flex-1',
                 container: classNames(
-                  'flex flex-col',
+                  'flex min-h-0 flex-col',
                   isReply ? 'h-[calc(100%-2.5rem)]' : 'h-full',
                 ),
                 tab: 'flex-1',

From dbf04f556c50d473bb1f02e66cb23c0611f8bb47 Mon Sep 17 00:00:00 2001
From: rebelchris <chrisbongers@gmail.com>
Date: Sat, 28 Mar 2026 05:29:34 +0000
Subject: [PATCH 2/2] fix(shared): simplify mobile comment modal layout

---
 .../modals/post/CommentModal.spec.tsx         | 67 +++-------------
 .../components/modals/post/CommentModal.tsx   | 76 +------------------
 2 files changed, 13 insertions(+), 130 deletions(-)

diff --git a/packages/shared/src/components/modals/post/CommentModal.spec.tsx b/packages/shared/src/components/modals/post/CommentModal.spec.tsx
index 0eb37bd7b63..1c7b8991eea 100644
--- a/packages/shared/src/components/modals/post/CommentModal.spec.tsx
+++ b/packages/shared/src/components/modals/post/CommentModal.spec.tsx
@@ -1,14 +1,13 @@
 import React, { type ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
-import CommentModal, { getCommentInputMinHeight } from './CommentModal';
+import CommentModal from './CommentModal';
 import Post from '../../../../__tests__/fixture/post';
 import loggedUser from '../../../../__tests__/fixture/loggedUser';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import useCommentById from '../../../hooks/comments/useCommentById';
 import { useNotificationToggle } from '../../../hooks/notifications';
 import { useMutateComment } from '../../../hooks/post/useMutateComment';
-import { useVisualViewport } from '../../../hooks/utils/useVisualViewport';
 
 jest.mock('../common/Modal', () => {
   const mockReact = jest.requireActual('react') as typeof React;
@@ -110,10 +109,6 @@ jest.mock('../../../hooks/post/useMutateComment', () => ({
   useMutateComment: jest.fn(),
 }));
 
-jest.mock('../../../hooks/utils/useVisualViewport', () => ({
-  useVisualViewport: jest.fn(),
-}));
-
 jest.mock('../../../hooks/notifications', () => ({
   useNotificationToggle: jest.fn(),
 }));
@@ -125,7 +120,6 @@ jest.mock('../../../hooks/comments/useCommentById', () => ({
 
 const mockUseAuthContext = useAuthContext as jest.Mock;
 const mockUseMutateComment = useMutateComment as jest.Mock;
-const mockUseVisualViewport = useVisualViewport as jest.Mock;
 const mockUseNotificationToggle = useNotificationToggle as jest.Mock;
 const mockUseCommentById = useCommentById as jest.Mock;
 
@@ -154,7 +148,6 @@ describe('CommentModal', () => {
       isLoading: false,
       isSuccess: false,
     });
-    mockUseVisualViewport.mockReturnValue({ height: 220 });
     mockUseNotificationToggle.mockReturnValue({
       shouldShowCta: true,
       isEnabled: true,
@@ -172,57 +165,17 @@ describe('CommentModal', () => {
     );
   });
 
-  it('should size the comment form to the available viewport height without forcing 300px', () => {
-    const { rerender } = renderComponent();
-    const header = screen.getByRole('button', { name: 'Cancel' }).parentElement;
-    const notificationSwitch = screen.getByTestId('notification-switch');
-
-    if (!header) {
-      throw new Error('Expected comment modal header to be rendered');
-    }
+  it('should keep the editor and notification switch in the normal flex flow', () => {
+    renderComponent();
 
-    Object.defineProperty(header, 'offsetHeight', {
-      configurable: true,
-      value: 48,
-    });
-    Object.defineProperty(notificationSwitch, 'clientHeight', {
-      configurable: true,
-      value: 40,
-    });
+    const commentForm = screen.getByTestId('comment-form');
 
-    rerender(
-      <QueryClientProvider client={new QueryClient()}>
-        <CommentModal {...defaultProps} />
-      </QueryClientProvider>,
+    expect(commentForm).toHaveClass('flex', 'min-h-0');
+    expect(screen.getByTestId('markdown-container')).toHaveClass(
+      'min-h-0',
+      'flex-1',
     );
-
-    expect(screen.getByTestId('comment-form')).toHaveStyle({
-      height: 'auto',
-      minHeight: '132px',
-    });
-  });
-});
-
-describe('getCommentInputMinHeight', () => {
-  it('should return the remaining viewport height', () => {
-    expect(
-      getCommentInputMinHeight({
-        viewportHeight: 640,
-        headerHeight: 48,
-        replyHeight: 24,
-        footerHeight: 40,
-      }),
-    ).toBe(528);
-  });
-
-  it('should return undefined when the viewport is fully consumed', () => {
-    expect(
-      getCommentInputMinHeight({
-        viewportHeight: 100,
-        headerHeight: 60,
-        replyHeight: 20,
-        footerHeight: 20,
-      }),
-    ).toBeUndefined();
+    expect(screen.getByTestId('notification-switch')).toBeInTheDocument();
+    expect(commentForm).not.toHaveAttribute('style');
   });
 });
diff --git a/packages/shared/src/components/modals/post/CommentModal.tsx b/packages/shared/src/components/modals/post/CommentModal.tsx
index e7c1024440e..c307be759de 100644
--- a/packages/shared/src/components/modals/post/CommentModal.tsx
+++ b/packages/shared/src/components/modals/post/CommentModal.tsx
@@ -1,11 +1,5 @@
 import type { ReactElement } from 'react';
-import React, {
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import type { QueryClient } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames';
@@ -15,7 +9,6 @@ import { FormWrapper } from '../../fields/form';
 import type { CommentMarkdownInputProps } from '../../fields/MarkdownInput/CommentMarkdownInput';
 import { CommentMarkdownInput } from '../../fields/MarkdownInput/CommentMarkdownInput';
 import { useMutateComment } from '../../../hooks/post/useMutateComment';
-import { useVisualViewport } from '../../../hooks/utils/useVisualViewport';
 import type { Comment, PostCommentsData } from '../../../graphql/comments';
 import { useNotificationToggle } from '../../../hooks/notifications';
 import { NotificationPromptSource } from '../../../lib/log';
@@ -55,13 +48,6 @@ interface GetCommentFromCacheProps {
   commentId?: string;
 }
 
-interface GetCommentInputMinHeightProps {
-  viewportHeight?: number;
-  headerHeight: number;
-  replyHeight: number;
-  footerHeight: number;
-}
-
 const getCommentFromCache = ({
   client,
   postId,
@@ -86,23 +72,6 @@ const getCommentFromCache = ({
 
   return undefined;
 };
-
-export const getCommentInputMinHeight = ({
-  viewportHeight = 0,
-  headerHeight,
-  replyHeight,
-  footerHeight,
-}: GetCommentInputMinHeightProps): number | undefined => {
-  const availableHeight =
-    viewportHeight - headerHeight - replyHeight - footerHeight;
-
-  if (availableHeight <= 0) {
-    return undefined;
-  }
-
-  return availableHeight;
-};
-
 export interface CommentModalProps
   extends LazyModalCommonProps,
     CommentMarkdownInputProps {
@@ -120,11 +89,6 @@ export default function CommentModal({
   post,
   initialContent: initialContentFromProps,
 }: CommentModalProps): ReactElement {
-  const inputRef = useRef<HTMLFormElement>(null);
-  const headerRef = useRef<HTMLDivElement>(null);
-  const replyRef = useRef<HTMLDivElement>(null);
-  const switchRef = useRef<HTMLLabelElement>(null);
-
   const { user } = useAuthContext();
   const client = useQueryClient();
   const [modalNode, setModalNode] = useState<HTMLElement>(null);
@@ -189,34 +153,6 @@ export default function CommentModal({
     modalNode?.scrollTo?.({ behavior: 'auto', top: 10000 });
   }, [modalNode]);
 
-  const { height } = useVisualViewport();
-  const replyHeight = replyRef.current?.clientHeight ?? 0;
-  const footerHeight = switchRef.current?.clientHeight ?? 0;
-  const headerHeight = headerRef.current?.offsetHeight ?? 0;
-  const inputMinHeight = getCommentInputMinHeight({
-    viewportHeight: height,
-    headerHeight,
-    replyHeight,
-    footerHeight,
-  });
-
-  useLayoutEffect(() => {
-    const inputNode = inputRef.current;
-
-    if (!inputNode) {
-      return;
-    }
-
-    if (!inputMinHeight) {
-      inputNode.style.removeProperty('height');
-      inputNode.style.removeProperty('min-height');
-      return;
-    }
-
-    inputNode.style.height = 'auto';
-    inputNode.style.minHeight = `${inputMinHeight}px`;
-  }, [inputMinHeight]);
-
   const { submitCopy, initialContent } = useMemo(() => {
     if (isEdit) {
       return {
@@ -273,10 +209,9 @@ export default function CommentModal({
             }}
             className={{
               container:
-                'min-h-full flex-1 bg-background-default first:!border-none',
+                'flex min-h-full flex-1 flex-col bg-background-default first:!border-none',
               header: 'sticky top-0 z-2 w-full bg-background-default',
             }}
-            headerRef={headerRef}
           >
             {isReply && comment && (
               <>
@@ -289,10 +224,7 @@ export default function CommentModal({
                   postAuthorId={post?.author?.id}
                   postScoutId={post?.scout?.id}
                 />
-                <div
-                  className="ml-12 flex gap-2 border-l border-border-subtlest-tertiary py-3 pl-5 text-text-tertiary typo-caption1"
-                  ref={replyRef}
-                >
+                <div className="ml-12 flex gap-2 border-l border-border-subtlest-tertiary py-3 pl-5 text-text-tertiary typo-caption1">
                   Reply to
                   <span className="font-bold text-text-primary">
                     {comment.author?.username}
@@ -301,7 +233,6 @@ export default function CommentModal({
               </>
             )}
             <CommentMarkdownInput
-              ref={inputRef}
               replyTo={null}
               post={post}
               parentCommentId={parentCommentId}
@@ -329,7 +260,6 @@ export default function CommentModal({
                 compact={false}
                 checked={isEnabled}
                 onToggle={onToggle}
-                ref={switchRef}
               >
                 Receive updates when other members engage
               </Switch>