From 208ab52f6c70c1a816af420bd7249913a99d9322 Mon Sep 17 00:00:00 2001
From: Ishkirat-Singh <ishkirat04@gmail.com>
Date: Thu, 10 Sep 2026 05:33:25 +0530
Subject: [PATCH 1/2] fix(react): keep the grid suggestion menu inside the
 viewport

The emoji picker is rendered as a fixed number of columns, so on narrow
viewports it was wider than the screen: the right-hand columns were cut off
and the menu only scrolled vertically. Cap the floating element's width to
the space floating-ui reports as available, the same way its height is
already capped, and let the grid scroll horizontally when the columns do
not fit.

Fixes #3078
---
 packages/ariakit/src/style.css                                 | 2 ++
 packages/mantine/src/blocknoteStyles.css                       | 2 ++
 .../GridSuggestionMenu/GridSuggestionMenuController.tsx        | 3 ++-
 .../suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx   | 2 +-
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css
index 59974a6d60..88bb7de881 100644
--- a/packages/ariakit/src/style.css
+++ b/packages/ariakit/src/style.css
@@ -157,6 +157,8 @@
   height: fit-content;
   justify-items: center;
   max-height: inherit;
+  max-width: inherit;
+  overflow-x: auto;
   overflow-y: auto;
   padding: 20px;
 }
diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css
index b219cfb628..53ce7d7c8b 100644
--- a/packages/mantine/src/blocknoteStyles.css
+++ b/packages/mantine/src/blocknoteStyles.css
@@ -441,6 +441,8 @@
   height: fit-content;
   justify-items: center;
   max-height: inherit;
+  max-width: inherit;
+  overflow-x: auto;
   overflow-y: auto;
   padding: 20px;
 }
diff --git a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx
index 1fe667635b..4cc02767ca 100644
--- a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx
+++ b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx
@@ -144,8 +144,9 @@ export function GridSuggestionMenuController<
           }),
           shift(),
           size({
-            apply({ elements, availableHeight }) {
+            apply({ elements, availableHeight, availableWidth }) {
               elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`;
+              elements.floating.style.maxWidth = `${Math.max(0, availableWidth)}px`;
             },
             padding: 10,
           }),
diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
index f8c95331b8..530896719c 100644
--- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
+++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
@@ -16,7 +16,7 @@ export const GridSuggestionMenu = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
-        "bg-popover text-popover-foreground z-50 min-w-32 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 ring-foreground/10",
+        "bg-popover text-popover-foreground z-50 min-w-32 max-w-[inherit] overflow-x-auto overflow-y-auto rounded-md p-1 shadow-md ring-1 ring-foreground/10",
         "grid",
         className,
       )}

From f896978cbdca05e379dcbae4cdad52de4411186b Mon Sep 17 00:00:00 2001
From: Ishkirat-Singh <ishkirat04@gmail.com>
Date: Fri, 11 Sep 2026 04:09:36 +0530
Subject: [PATCH 2/2] fix(react): size the grid suggestion menu by its border
 box

With max-width capped to the available width, content-box sizing let the
padding push the menu past the cap, and the shadcn min-w-32 kept it from
shrinking on very narrow viewports.
---
 packages/ariakit/src/style.css                                  | 1 +
 packages/mantine/src/blocknoteStyles.css                        | 1 +
 .../suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx    | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css
index 88bb7de881..e51b76292d 100644
--- a/packages/ariakit/src/style.css
+++ b/packages/ariakit/src/style.css
@@ -157,6 +157,7 @@
   height: fit-content;
   justify-items: center;
   max-height: inherit;
+  box-sizing: border-box;
   max-width: inherit;
   overflow-x: auto;
   overflow-y: auto;
diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css
index 53ce7d7c8b..39fe0796b0 100644
--- a/packages/mantine/src/blocknoteStyles.css
+++ b/packages/mantine/src/blocknoteStyles.css
@@ -441,6 +441,7 @@
   height: fit-content;
   justify-items: center;
   max-height: inherit;
+  box-sizing: border-box;
   max-width: inherit;
   overflow-x: auto;
   overflow-y: auto;
diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
index 530896719c..ffdf5ab89f 100644
--- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
+++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx
@@ -16,7 +16,7 @@ export const GridSuggestionMenu = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
-        "bg-popover text-popover-foreground z-50 min-w-32 max-w-[inherit] overflow-x-auto overflow-y-auto rounded-md p-1 shadow-md ring-1 ring-foreground/10",
+        "bg-popover text-popover-foreground z-50 box-border max-w-[inherit] overflow-x-auto overflow-y-auto rounded-md p-1 shadow-md ring-1 ring-foreground/10",
         "grid",
         className,
       )}