diff --git a/src/modals/TextInputModal.ts b/src/modals/TextInputModal.ts
index e5b45d6..a2fc29f 100644
--- a/src/modals/TextInputModal.ts
+++ b/src/modals/TextInputModal.ts
@@ -101,8 +101,8 @@ export class TextInputModal extends Modal {
 
         // Apply the new position
         const modalEl = this.modalEl;
-        modalEl.style.left = `${newX}px`;
-        modalEl.style.top = `${newY}px`;
+        modalEl.style.setProperty('--modal-left', `${newX}px`);
+        modalEl.style.setProperty('--modal-top', `${newY}px`);
     }
 
     // Handle modal release
@@ -154,8 +154,7 @@ export class TextInputModal extends Modal {
 
         // Hide the modal initially to prevent flashing
         if (this.cursorPosition) {
-            modalEl.style.opacity = '0';
-            modalEl.style.transition = 'opacity 150ms ease-in-out';
+            modalEl.addClass('variant-editor-modal-hidden');
         }
 
         // Set the title using Obsidian's built-in functionality
@@ -164,6 +163,7 @@ export class TextInputModal extends Modal {
         // Add classes for styling
         modalEl.addClass('variant-editor-modal');
         modalEl.addClass('variant-editor-no-dim'); // Class to remove background dimming
+        modalEl.addClass('variant-editor-modal-dynamic'); // Add dynamic positioning class
 
         // Make the modal header draggable
         const titleEl = modalEl.querySelector('.modal-title');
@@ -183,7 +183,8 @@ export class TextInputModal extends Modal {
             queueMicrotask(() => {
                 this.positionModalRelativeToCursor(modalEl);
                 // Fade in the modal after positioning
-                modalEl.style.opacity = '1';
+                modalEl.removeClass('variant-editor-modal-hidden');
+                modalEl.addClass('variant-editor-modal-visible');
             });
         }
 
@@ -324,23 +325,22 @@ export class TextInputModal extends Modal {
         }
 
         // Apply the position
-        modalEl.style.position = 'fixed';
-        modalEl.style.transform = 'none'; // Remove default centering
+        modalEl.style.setProperty('--modal-transform', 'none');
 
         if (positionAbove) {
             // When positioned above, set explicit top position
-            modalEl.style.top = `${Math.max(0, top)}px`;
-            modalEl.style.bottom = 'auto';
-            modalEl.classList.add('variant-editor-modal-above');
+            modalEl.style.setProperty('--modal-top', `${Math.max(0, top)}px`);
+            modalEl.style.setProperty('--modal-bottom', 'auto');
+            modalEl.addClass('variant-editor-modal-above');
         } else {
             // When positioned below, set explicit top position
-            modalEl.style.top = `${Math.max(0, top)}px`;
-            modalEl.style.bottom = 'auto';
-            modalEl.classList.remove('variant-editor-modal-above');
+            modalEl.style.setProperty('--modal-top', `${Math.max(0, top)}px`);
+            modalEl.style.setProperty('--modal-bottom', 'auto');
+            modalEl.removeClass('variant-editor-modal-above');
         }
 
         // Set the left position
-        modalEl.style.left = `${Math.max(0, left)}px`;
+        modalEl.style.setProperty('--modal-left', `${Math.max(0, left)}px`);
     }
 
     /**
diff --git a/styles.css b/styles.css
index 1d07c97..09c00f4 100644
--- a/styles.css
+++ b/styles.css
@@ -68,7 +68,7 @@
 /* Show a small indicator for hidden parts when hovered */
 .variant-syntax-start:hover,
 .variant-syntax-end:hover,
-.variant-inactive-option:hover {
+.variant-syntax-inactive-option:hover {
   background-color: rgba(121, 184, 255, 0.3);
 }
 
@@ -311,7 +311,6 @@
   /* Higher z-index to appear above the rainbow border */
 }
 
-
 /* Delete button styling */
 .variant-editor-delete-button {
   background: none !important;
@@ -378,8 +377,6 @@
   /* Reduced height by 10px */
 }
 
-
-
 .variant-editor-commit-button {
   background-color: #7E6BDC !important;
   /* Obsidian purple */
@@ -422,6 +419,11 @@
   border: 1px solid var(--background-modifier-border) !important;
   border-radius: 12px !important;
   background-color: var(--background-primary) !important;
+  position: fixed !important;
+  left: var(--modal-left, 50%) !important;
+  top: var(--modal-top, 50%) !important;
+  bottom: var(--modal-bottom, auto) !important;
+  transform: var(--modal-transform, translate(-50%, -50%)) !important;
 }
 
 /* Style the modal title */
@@ -458,6 +460,22 @@
   user-select: none;
 }
 
+.variant-editor-modal-hidden {
+  opacity: 0;
+  transition: opacity 150ms ease-in-out;
+}
+
+.variant-editor-modal-visible {
+  opacity: 1;
+  transition: opacity 150ms ease-in-out;
+}
+
+.variant-editor-textarea:focus {
+  outline: none;
+  border-color: var(--interactive-accent);
+  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
+}
+
 /* When modal is positioned above the highlighted line, we no longer reorder elements */
 .variant-editor-modal-above .variant-editor-flex-container {
   /* Keep normal flow, just position the modal differently */
@@ -475,10 +493,4 @@ body:has(.variant-editor-modal) .modal-bg {
   background-color: transparent !important;
   backdrop-filter: none !important;
   opacity: 0 !important;
-}
-
-.variant-editor-textarea:focus {
-  outline: none;
-  border-color: var(--interactive-accent);
-  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
 }
\ No newline at end of file