diff --git a/packages/widgets/src/bookmarks/bookmark.module.css b/packages/widgets/src/bookmarks/bookmark.module.css
index 9443ec198..e82a66de2 100644
--- a/packages/widgets/src/bookmarks/bookmark.module.css
+++ b/packages/widgets/src/bookmarks/bookmark.module.css
@@ -24,7 +24,7 @@
   background-color: var(--mantine-color-iconColor-filled-hover);
 }
 
-.compactScrollArea :global(.mantine-ScrollArea-viewport) > div {
+.compactScrollViewport > div {
   display: flex !important;
   width: 100%;
   min-height: 100%;
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index e956eec7a..e8311219d 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -130,7 +130,7 @@ export default function BookmarksWidget({
       )}
       {displayMode !== "advanced" && (
         <ScrollArea
-          className={classes.compactScrollArea}
+          classNames={{ viewport: classes.compactScrollViewport }}
           type="auto"
           scrollbarSize={6}
           style={{ flex: 1, minHeight: 0 }}