do not affect other cm instances

Author: cquirosj

src/Frontend/src/components/MaximizableCodeEditor.vue

@@ -58,7 +58,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="code-editor-wrapper">
     <!-- Regular CodeEditor with maximize button in toolbarRight -->
-    <CodeEditor v-model="modelValue" :language="language" :read-only="readOnly" :show-gutter="showGutter" :show-copy-to-clipboard="showCopyToClipboard" :aria-label="ariaLabel" :extensions="extensions">
+    <CodeEditor class="maximazable-code-editor--inline-instance" v-model="modelValue" :language="language" :read-only="readOnly" :show-gutter="showGutter" :show-copy-to-clipboard="showCopyToClipboard" :aria-label="ariaLabel" :extensions="extensions">
       <template #toolbarLeft>
         <slot name="toolbarLeft"></slot>
       </template>
@@ -76,7 +76,7 @@ onBeforeUnmount(() => {
           <img class="maximize-modal-close" :src="DiffCloseIcon" alt="Close" @click="toggleMaximizeModal" title="Close" />
         </div>
         <div class="maximize-modal-body">
-          <CodeEditor v-model="modelValue" :language="language" :read-only="readOnly" :show-copy-to-clipboard="true" :show-gutter="true" :aria-label="ariaLabel" :extensions="[]" />
+          <CodeEditor class="maximazable-code-editor--pop-up-instance" v-model="modelValue" :language="language" :read-only="readOnly" :show-copy-to-clipboard="true" :show-gutter="true" :aria-label="ariaLabel" :extensions="[]" />
         </div>
       </div>
     </div>

src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue

@@ -18,19 +18,14 @@ import TimeoutIcon from "@/assets/timeout.svg";
 import EventIcon from "@/assets/event.svg";
 import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 
-// Define the monospace theme for CodeEditor
+// Define monospace theme with specific selectors for this component
 const monospaceTheme = EditorView.baseTheme({
-  "&": {
+  ".maximazable-code-editor--inline-instance .cm-editor": {
     fontFamily: "monospace",
     fontSize: "0.75rem",
     backgroundColor: "#f2f2f2",
   },
-  ".cm-editor": {
-    fontFamily: "monospace",
-    fontSize: "0.75rem",
-    backgroundColor: "#f2f2f2",
-  },
-  ".cm-scroller": {
+  ".maximazable-code-editor--inline-instance .cm-scroller": {
     backgroundColor: "#f2f2f2",
   },
 });
@@ -428,7 +423,7 @@ const hasStateChanges = computed(() => {
 }
 
 /* Override CodeEditor wrapper styles */
-.json-container :deep(.wrapper) {
+.json-container :deep(.wrapper.maximazable-code-editor--inline-instance) {
   border-radius: 0;
   border: none;
   background-color: #f2f2f2;