From b4bd68853a12cf561031692c975e9af435a67110 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Wed, 27 May 2026 06:45:57 +0000
Subject: [PATCH] Prevent image clicking if not in editing mode

---
 .../src/components/editors/NotesEditor.css         | 14 ++++++++++++++
 .../src/components/editors/NotesEditor.tsx         |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/editors/NotesEditor.css b/src/frontend/src/components/editors/NotesEditor.css
index 35b2cc8f5e..b674d06d10 100644
--- a/src/frontend/src/components/editors/NotesEditor.css
+++ b/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;
+}
diff --git a/src/frontend/src/components/editors/NotesEditor.tsx b/src/frontend/src/components/editors/NotesEditor.tsx
index 1776d47b3c..da0366f99f 100644
--- a/src/frontend/src/components/editors/NotesEditor.tsx
+++ b/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