From 6af251a1083ea23bd5cf390e9a2b8f3e44f7042e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 17 Feb 2026 02:01:50 +0530
Subject: [PATCH] refactor: update FixedToolbarButtons to conditionally render
 save button based on read-only state, and adjust dropdown menu styles for
 better usability

---
 .../components/ui/fixed-toolbar-buttons.tsx   | 36 ++++++++++---------
 .../components/ui/insert-toolbar-button.tsx   |  2 +-
 .../ui/turn-into-toolbar-button.tsx           |  2 +-
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/surfsense_web/components/ui/fixed-toolbar-buttons.tsx b/surfsense_web/components/ui/fixed-toolbar-buttons.tsx
index c3b421a63..91fbdb306 100644
--- a/surfsense_web/components/ui/fixed-toolbar-buttons.tsx
+++ b/surfsense_web/components/ui/fixed-toolbar-buttons.tsx
@@ -101,28 +101,30 @@ export function FixedToolbarButtons() {
             <LinkToolbarButton />
           </ToolbarGroup>
 
-          {/* Save button — appears when in editing mode with unsaved changes */}
-          {onSave && hasUnsavedChanges && (
-            <ToolbarGroup>
-              <ToolbarButton
-                tooltip={isSaving ? 'Saving...' : 'Save (⌘+S)'}
-                onClick={onSave}
-                disabled={isSaving}
-                className="text-white"
-              >
-                {isSaving ? (
-                  <Spinner size="xs" />
-                ) : (
-                  <SaveIcon />
-                )}
-              </ToolbarButton>
-            </ToolbarGroup>
-          )}
         </>
       )}
 
       <div className="grow" />
 
+      {/* Save button — only in edit mode with unsaved changes */}
+      {!readOnly && onSave && hasUnsavedChanges && (
+        <ToolbarGroup>
+          <ToolbarButton
+            tooltip={isSaving ? 'Saving...' : 'Save (⌘+S)'}
+            onClick={onSave}
+            disabled={isSaving}
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
+          >
+            {isSaving ? (
+              <Spinner size="xs" />
+            ) : (
+              <SaveIcon />
+            )}
+          </ToolbarButton>
+        </ToolbarGroup>
+      )}
+
+      {/* Mode toggle */}
       {canToggleMode && (
         <ToolbarGroup>
           <ModeToolbarButton />
diff --git a/surfsense_web/components/ui/insert-toolbar-button.tsx b/surfsense_web/components/ui/insert-toolbar-button.tsx
index 452110df5..c5ae049a1 100644
--- a/surfsense_web/components/ui/insert-toolbar-button.tsx
+++ b/surfsense_web/components/ui/insert-toolbar-button.tsx
@@ -195,7 +195,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
+        className="flex max-h-[300px] min-w-0 flex-col overflow-y-scroll"
         align="start"
       >
         {groups.map(({ group, items }) => (
diff --git a/surfsense_web/components/ui/turn-into-toolbar-button.tsx b/surfsense_web/components/ui/turn-into-toolbar-button.tsx
index f5aaa9dd4..546884113 100644
--- a/surfsense_web/components/ui/turn-into-toolbar-button.tsx
+++ b/surfsense_web/components/ui/turn-into-toolbar-button.tsx
@@ -155,7 +155,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="ignore-click-outside/toolbar min-w-0"
+        className="ignore-click-outside/toolbar min-w-0 max-h-[350px] overflow-y-scroll"
         onCloseAutoFocus={(e) => {
           e.preventDefault();
           editor.tf.focus();