From 076cea6d6d788f95af4928877052aea6e12b8daa Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Fri, 16 Jan 2026 19:22:08 +0500
Subject: [PATCH] editor: add scrollbar to color picker (#8065)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
---
 packages/editor/src/toolbar/popups/color-picker.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/toolbar/popups/color-picker.tsx b/packages/editor/src/toolbar/popups/color-picker.tsx
index 34209bd55..b192f706f 100644
--- a/packages/editor/src/toolbar/popups/color-picker.tsx
+++ b/packages/editor/src/toolbar/popups/color-picker.tsx
@@ -30,6 +30,7 @@ import { Popup } from "../components/popup.js";
 import { SchemeColors } from "@notesnook/theme";
 import { Editor } from "../../types.js";
 import { strings } from "@notesnook/intl";
+import { useToolbarStore } from "../stores/toolbar-store.js";
 
 type ColorPickerProps = {
   editor: Editor;
@@ -171,13 +172,18 @@ export function ColorPicker(props: ColorPickerProps) {
         ) : null}
         <Flex>
           <Flex
-            className="hide-scrollbar"
+            className={
+              useToolbarStore.getState().isMobile
+                ? "hide-scrollbar"
+                : "scroll-bar"
+            }
             sx={{
               flex: 1,
               p: 1,
               overflowX: ["auto", "hidden"],
               flexWrap: ["nowrap", "wrap"],
-              overflowY: ["hidden", "auto"]
+              overflowY: ["hidden", "auto"],
+              maxHeight: 200
             }}
           >
             {!deleteMode && (