refactor: update FixedToolbarButtons to conditionally render save button based on read-only state, and adjust dropdown menu styles for better usability

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 />

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 }) => (

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();