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,14 +101,19 @@ export function FixedToolbarButtons() {
             <LinkToolbarButton />
           </ToolbarGroup>
 
-          {/* Save button — appears when in editing mode with unsaved changes */}
+        </>
-          {onSave && hasUnsavedChanges && (
+      )}
+
+      <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="text-white"
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
           >
             {isSaving ? (
               <Spinner size="xs" />
@@ -118,11 +123,8 @@ export function FixedToolbarButtons() {
           </ToolbarButton>
         </ToolbarGroup>
       )}
-        </>
-      )}
-
-      <div className="grow" />
 
+      {/* 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();