From e83c012c528737a1513d2dd17bc51db9a9ece00a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 13 Mar 2026 07:53:39 +0000
Subject: [PATCH 1/4] Initial plan
From 9286342da41052490cb0f77211d3e44acd3cdfca Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 13 Mar 2026 08:02:57 +0000
Subject: [PATCH 2/4] admin: Fix scrollbar overlapping icons in MainNavigation
Co-authored-by: thomasdax98 <13380047+thomasdax98@users.noreply.github.com>
---
.changeset/fix-main-navigation-scrollbar.md | 5 +
.../mainNavigation/MainNavigation.styles.ts | 2 +
storybook/src/admin/mui/Menu.stories.tsx | 104 +++++++++++++++++-
3 files changed, 110 insertions(+), 1 deletion(-)
create mode 100644 .changeset/fix-main-navigation-scrollbar.md
diff --git a/.changeset/fix-main-navigation-scrollbar.md b/.changeset/fix-main-navigation-scrollbar.md
new file mode 100644
index 00000000000..f6d9f3aed1b
--- /dev/null
+++ b/.changeset/fix-main-navigation-scrollbar.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+Fix scrollbar overlapping icons in MainNavigation by adding `overflow-y: auto` and `scrollbar-gutter: stable`
diff --git a/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
index 9df85da5b18..16da234b9da 100644
--- a/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
+++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
@@ -30,6 +30,8 @@ export type OwnerState = {
const getSharedStyles = (theme: Theme, headerHeight: number) => css`
background-color: ${theme.palette.common.white};
overflow-x: hidden;
+ overflow-y: auto;
+ scrollbar-gutter: stable;
height: calc(100% - ${headerHeight}px);
top: ${headerHeight}px;
diff --git a/storybook/src/admin/mui/Menu.stories.tsx b/storybook/src/admin/mui/Menu.stories.tsx
index e5d0bd6bcf7..c60083b3b9a 100644
--- a/storybook/src/admin/mui/Menu.stories.tsx
+++ b/storybook/src/admin/mui/Menu.stories.tsx
@@ -12,7 +12,25 @@ import {
MasterLayout,
useWindowSize,
} from "@comet/admin";
-import { CometColor, Dashboard, Settings, Sort } from "@comet/admin-icons";
+import {
+ Account,
+ Archive,
+ Assets,
+ Calendar,
+ CometColor,
+ Dashboard,
+ Document,
+ File,
+ Folder,
+ Language,
+ Link,
+ Mail,
+ Preview,
+ Settings,
+ Sort,
+ Tag,
+ Wrench,
+} from "@comet/admin-icons";
import { Card, CardContent, Typography } from "@mui/material";
import { Route, Switch } from "react-router";
@@ -100,3 +118,87 @@ export const _Menu = {
parameters: { layout: "fullscreen" },
};
+
+const AppMenuWithManyItems = () => {
+ const windowSize = useWindowSize();
+
+ return (
+
+
+ } to="/dashboard" />
+ } to="/pages" />
+ } to="/assets" />
+ } to="/files" />
+ } to="/folders" />
+ }>
+
+
+
+
+
+
+ } to="/email" />
+ } to="/newsletters" />
+ } to="/preview" />
+ }>
+
+
+
+
+
+
+
+ } to="/links" />
+ } to="/calendar" />
+ } to="/archive" />
+ } to="/accounts" />
+
+
+ } to="/settings" />
+ } to="/configuration" />
+ } to="/sort" />
+ }
+ />
+
+
+ );
+};
+
+export const MenuWithManyItems = {
+ render: () => (
+
+
+ Root} />
+ Dashboard} />
+ Pages} />
+ Assets} />
+ Files} />
+ Folders} />
+ Blog Posts} />
+ Blog Categories} />
+ Blog Tags} />
+ Email Campaigns} />
+ Newsletters} />
+ Preview} />
+ English} />
+ German} />
+ French} />
+ Spanish} />
+ Links} />
+ Calendar} />
+ Archive} />
+ Accounts} />
+ Settings} />
+ Configuration} />
+ Sort} />
+
+
+ ),
+
+ parameters: { layout: "fullscreen" },
+};
From 56cea5754b2f32b202a7142aded546ceb82e364b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 13 Mar 2026 08:29:52 +0000
Subject: [PATCH 3/4] admin: Fix scrollbar gutter showing on collapsed
MainNavigation
Co-authored-by: thomasdax98 <13380047+thomasdax98@users.noreply.github.com>
---
.../src/mui/mainNavigation/MainNavigation.styles.ts | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
index 16da234b9da..bab9b1f529f 100644
--- a/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
+++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
@@ -30,8 +30,6 @@ export type OwnerState = {
const getSharedStyles = (theme: Theme, headerHeight: number) => css`
background-color: ${theme.palette.common.white};
overflow-x: hidden;
- overflow-y: auto;
- scrollbar-gutter: stable;
height: calc(100% - ${headerHeight}px);
top: ${headerHeight}px;
@@ -57,6 +55,8 @@ export const TemporaryDrawer = createComponentSlot(MuiDrawer)
Date: Fri, 13 Mar 2026 10:30:27 +0000
Subject: [PATCH 4/4] admin: Hide scrollbar in MainNavigation using
scrollbar-width: none
Co-authored-by: thomasdax98 <13380047+thomasdax98@users.noreply.github.com>
---
.../mui/mainNavigation/MainNavigation.styles.ts | 15 ++++++++-------
1 file changed, 8 insertions(+), 7 deletions(-)
diff --git a/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
index bab9b1f529f..2d048982b0d 100644
--- a/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
+++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts
@@ -30,6 +30,13 @@ export type OwnerState = {
const getSharedStyles = (theme: Theme, headerHeight: number) => css`
background-color: ${theme.palette.common.white};
overflow-x: hidden;
+ overflow-y: auto;
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
height: calc(100% - ${headerHeight}px);
top: ${headerHeight}px;
@@ -55,8 +62,6 @@ export const TemporaryDrawer = createComponentSlot(MuiDrawer)