From d7118fba15f916e16c7d2ab5b12a4a94a87a011e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 17 Feb 2026 02:46:23 +0530
Subject: [PATCH] refactor: enhance InsertToolbarButton and
 TurnIntoToolbarButton with improved styling for dark mode and better layout
 management

---
 surfsense_web/components/ui/insert-toolbar-button.tsx    | 6 +++---
 surfsense_web/components/ui/turn-into-toolbar-button.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/surfsense_web/components/ui/insert-toolbar-button.tsx b/surfsense_web/components/ui/insert-toolbar-button.tsx
index 91d807ef0..4abf6a57b 100644
--- a/surfsense_web/components/ui/insert-toolbar-button.tsx
+++ b/surfsense_web/components/ui/insert-toolbar-button.tsx
@@ -195,12 +195,12 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="flex max-h-[300px] min-w-0 flex-col overflow-y-scroll dark:bg-neutral-800 dark:border dark:border-neutral-700"
+        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700"
         align="start"
       >
         {groups.map(({ group, items }) => (
           <React.Fragment key={group}>
-            <ToolbarMenuGroup>
+            <ToolbarMenuGroup label={group}>
               {items.map(({ icon, label, value, onSelect, focusEditor }) => (
                 <DropdownMenuItem
                   key={value}
@@ -213,7 +213,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
                   }}
                   className="group"
                 >
-                  <div className="flex items-center text-sm text-muted-foreground focus:text-accent-foreground group-aria-selected:text-accent-foreground">
+                  <div className="flex items-center text-sm dark:text-white text-muted-foreground focus:text-accent-foreground group-aria-selected:text-accent-foreground">
                     {icon}
                     <span className="ml-2">{label || value}</span>
                   </div>
diff --git a/surfsense_web/components/ui/turn-into-toolbar-button.tsx b/surfsense_web/components/ui/turn-into-toolbar-button.tsx
index 507344ce2..4b8c80c8e 100644
--- a/surfsense_web/components/ui/turn-into-toolbar-button.tsx
+++ b/surfsense_web/components/ui/turn-into-toolbar-button.tsx
@@ -172,7 +172,7 @@ export function TurnIntoToolbarButton({ tooltip = 'Turn into', ...props }: Dropd
           {turnIntoItems.map(({ icon, label, value: itemValue }) => (
             <DropdownMenuRadioItem
               key={itemValue}
-              className="min-w-[180px] pl-2 *:first:[span]:hidden"
+              className="min-w-[180px] pl-2 *:first:[span]:hidden dark:text-white"
               value={itemValue}
             >
               <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
@@ -180,7 +180,7 @@ export function TurnIntoToolbarButton({ tooltip = 'Turn into', ...props }: Dropd
                   <CheckIcon />
                 </DropdownMenuItemIndicator>
               </span>
-              {icon}
+              <span className="text-muted-foreground">{icon}</span>
               {label}
             </DropdownMenuRadioItem>
           ))}