Prevent image clicking if not in editing mode

src/frontend/src/components/editors/NotesEditor.css

@@ -66,3 +66,17 @@
 .ProseMirror.resize-cursor {
   cursor: col-resize;
 }
+
+/* Disable image interaction when not in editing mode */
+.mantine-RichTextEditor-root:not([data-editing]) .ProseMirror img {
+  pointer-events: none;
+  user-select: none;
+}
+
+.mantine-RichTextEditor-root:not([data-editing]) .node-image.ProseMirror-selectednode .image-component {
+  outline: none;
+}
+
+.mantine-RichTextEditor-root:not([data-editing]) .node-image.ProseMirror-selectednode .image-resizer {
+  display: none;
+}

src/frontend/src/components/editors/NotesEditor.tsx

@@ -470,6 +470,7 @@ export default function NotesEditor({
                   variant='subtle'
                   editor={editor}
                   style={{ minHeight: '400px' }}
+                  data-editing={isEditing || undefined}
                 >
                   {canEdit && isEditing && (
                     <RichTextEditor.Toolbar sticky>
@@ -631,7 +632,7 @@ export default function NotesEditor({
             </Paper>
           </Stack>
         </Box>
-        <Paper p='xs' shadow='sm' withBorder style={{ width: '200px' }}>
+        <Paper p='xs' shadow='sm' withBorder style={{ minWidth: '200px' }}>
           <Stack gap='xs'>
             {canEdit && (
               <Button