From 6a524e9fe1132876274177bee58ea5b5ec42cf13 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 7 Jun 2026 20:34:31 +0000
Subject: [PATCH] Lock page scroll while the date mention picker is open

Wrap the date picker popover content in RemoveScroll (via a Slot, with
the Radix content asChild), mirroring the inline editor menu, so the
page can't scroll behind the open calendar.
---
 app/editor/components/MentionMenu.tsx     |  2 +-
 shared/components/DynamicCalendarIcon.tsx |  2 +-
 shared/editor/components/Mentions.tsx     | 32 ++++++++++++++---------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/app/editor/components/MentionMenu.tsx b/app/editor/components/MentionMenu.tsx
index a9f638ea45..7a61091777 100644
--- a/app/editor/components/MentionMenu.tsx
+++ b/app/editor/components/MentionMenu.tsx
@@ -96,7 +96,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
             name: "mention",
             icon: (
               <DynamicCalendarIcon
-                day={parseISODate(parsedISODate).getDate()}
+                day={parseISODate(parsedISODate)?.getDate()}
               />
             ),
             title: dateToRelativeReadable(parsedISODate, t, userLocale),
diff --git a/shared/components/DynamicCalendarIcon.tsx b/shared/components/DynamicCalendarIcon.tsx
index 39d16c799d..dfc6c06926 100644
--- a/shared/components/DynamicCalendarIcon.tsx
+++ b/shared/components/DynamicCalendarIcon.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "styled-components";
 
-type Props = { day: number; className?: string };
+type Props = { day?: number; className?: string };
 
 export function DynamicCalendarIcon({ day, className }: Props) {
   const theme = useTheme();
diff --git a/shared/editor/components/Mentions.tsx b/shared/editor/components/Mentions.tsx
index f80f14c555..a23684074f 100644
--- a/shared/editor/components/Mentions.tsx
+++ b/shared/editor/components/Mentions.tsx
@@ -1,4 +1,5 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Slot } from "@radix-ui/react-slot";
 import { observer } from "mobx-react";
 import {
   DocumentIcon,
@@ -10,6 +11,7 @@ import type { Node } from "prosemirror-model";
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
 import { useTranslation } from "react-i18next";
+import { RemoveScroll } from "react-remove-scroll";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import { depths, s } from "../../styles";
@@ -585,22 +587,28 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
         {trigger}
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
-        <DatePopoverContent
+        <PopoverPrimitive.Content
+          asChild
           sideOffset={4}
           align="start"
           aria-label={t("Choose a date")}
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
-          <DayPicker
-            required
-            mode="single"
-            selected={selectedDate}
-            defaultMonth={selectedDate}
-            onSelect={handleSelect}
-            style={styles}
-            locale={dateLocale(language)}
-          />
-        </DatePopoverContent>
+          {/* Lock page scroll while open, matching the inline editor menu. */}
+          <RemoveScroll as={Slot} allowPinchZoom>
+            <DatePopoverContent>
+              <DayPicker
+                required
+                mode="single"
+                selected={selectedDate}
+                defaultMonth={selectedDate}
+                onSelect={handleSelect}
+                style={styles}
+                locale={dateLocale(language)}
+              />
+            </DatePopoverContent>
+          </RemoveScroll>
+        </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
   );
@@ -633,7 +641,7 @@ const DateMention = styled.span<{ $editable: boolean }>`
   user-select: none;
 `;
 
-const DatePopoverContent = styled(PopoverPrimitive.Content)`
+const DatePopoverContent = styled.div`
   z-index: ${depths.modal};
   background: ${s("menuBackground")};
   box-shadow: ${s("menuShadow")};