From fd7b5e0dd48fe87c6ce9abd4e0b78c33254370e8 Mon Sep 17 00:00:00 2001
From: LinuxKunaL <kunallokhande774@gmail.com>
Date: Fri, 17 Oct 2025 01:22:42 +0530
Subject: [PATCH 1/2] fix(rich-input.tsx): replace default scrollbar with
 themed scrollbar in Summary Editor, fixed #2420

---
 libs/ui/src/components/rich-input.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/libs/ui/src/components/rich-input.tsx b/libs/ui/src/components/rich-input.tsx
index df72d1c8..9fd56e6c 100644
--- a/libs/ui/src/components/rich-input.tsx
+++ b/libs/ui/src/components/rich-input.tsx
@@ -47,6 +47,7 @@ import { Popover, PopoverContent } from "./popover";
 import { Skeleton } from "./skeleton";
 import { Toggle } from "./toggle";
 import { Tooltip } from "./tooltip";
+import { ScrollArea } from "./scroll-area";
 
 const InsertImageFormSchema = z.object({
   src: z.string(),
@@ -474,7 +475,7 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
       editorProps: {
         attributes: {
           class: cn(
-            "prose prose-sm prose-zinc max-h-[200px] max-w-none overflow-y-scroll dark:prose-invert focus:outline-none [&_*]:my-2",
+            "prose prose-sm prose-zinc max-h-[200px] max-w-none dark:prose-invert focus:outline-none [&_*]:my-2",
             editorClassName,
           ),
         },
@@ -497,16 +498,18 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
       <div>
         {!hideToolbar && <Toolbar editor={editor} />}
 
-        <EditorContent
-          editor={editor}
-          className={cn(
-            "grid min-h-[160px] w-full rounded-sm border bg-transparent px-3 py-2 text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
-            hideToolbar && "pt-2",
-            className,
-          )}
-          {...props}
-        />
-
+        <ScrollArea orientation="vertical" className="rounded-sm border px-3 py-2">
+          <EditorContent
+            editor={editor}
+            className={cn(
+              "grid min-h-[160px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+              hideToolbar && "pt-2",
+              className,
+            )}
+            {...props}
+          />
+        </ScrollArea>
+        
         {footer?.(editor)}
       </div>
     );

From 53213dfb263620fb2c8645883fc375cd841d4c51 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Tue, 4 Nov 2025 15:27:40 +0100
Subject: [PATCH 2/2] Refactor RichInput component: adjust ScrollArea padding
 and EditorContent min-height

---
 libs/ui/src/components/rich-input.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/ui/src/components/rich-input.tsx b/libs/ui/src/components/rich-input.tsx
index 17c184a3..2840b90b 100644
--- a/libs/ui/src/components/rich-input.tsx
+++ b/libs/ui/src/components/rich-input.tsx
@@ -44,10 +44,10 @@ import { Button } from "./button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./form";
 import { Input } from "./input";
 import { Popover, PopoverContent } from "./popover";
+import { ScrollArea } from "./scroll-area";
 import { Skeleton } from "./skeleton";
 import { Toggle } from "./toggle";
 import { Tooltip } from "./tooltip";
-import { ScrollArea } from "./scroll-area";
 
 const InsertImageFormSchema = z.object({
   src: z.string(),
@@ -527,18 +527,18 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
       <div>
         {!hideToolbar && <Toolbar editor={editor} />}
 
-        <ScrollArea orientation="vertical" className="rounded-sm border px-3 py-2">
+        <ScrollArea orientation="vertical" className="rounded-sm border p-3 pt-0">
           <EditorContent
             editor={editor}
             className={cn(
-              "grid min-h-[160px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+              "grid min-h-[140px] w-full bg-transparent text-sm placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
               hideToolbar && "pt-2",
               className,
             )}
             {...props}
           />
         </ScrollArea>
-        
+
         {footer?.(editor)}
       </div>
     );