diff --git a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
index 7c5f67d9ed..ee3ae1fffa 100644
--- a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
+++ b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
@@ -18,7 +18,17 @@ import styled from 'styled-components'
 import ChatFlowHistory from './ChatFlowHistory'
 
 // Exclude some areas from the navigation
-const EXCLUDED_SELECTORS = ['.MessageFooter', '.code-toolbar', '.ant-collapse-header', '.group-menu-bar', '.code-block']
+const EXCLUDED_SELECTORS = [
+  '.MessageFooter',
+  '.code-toolbar',
+  '.ant-collapse-header',
+  '.group-menu-bar',
+  '.code-block',
+  '.message-editor'
+]
+
+// Gap between the navigation bar and the right element
+const RIGHT_GAP = 16
 
 interface ChatNavigationProps {
   containerId: string
@@ -264,10 +274,10 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
       const triggerWidth = 60 // Same as the width in styled component
 
       // Safe way to calculate position when using calc expressions
-      let rightOffset = 16 // Default right offset
+      let rightOffset = RIGHT_GAP // Default right offset
       if (showRightTopics) {
         // When topics are shown on right, we need to account for topic list width
-        rightOffset = 16 + 300 // Assuming topic list width is 300px, adjust if different
+        rightOffset += 275 // --topic-list-width
       }
 
       const rightPosition = window.innerWidth - rightOffset - triggerWidth
@@ -280,7 +290,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
       const isInTriggerArea =
         !isInExcludedArea &&
         e.clientX > rightPosition &&
-        e.clientX < rightPosition + triggerWidth &&
+        e.clientX < rightPosition + triggerWidth + RIGHT_GAP &&
         e.clientY > topPosition &&
         e.clientY < topPosition + height
 
@@ -412,7 +422,7 @@ interface NavigationContainerProps {
 
 const NavigationContainer = styled.div<NavigationContainerProps>`
   position: fixed;
-  right: 16px;
+  right: ${RIGHT_GAP}px;
   top: 50%;
   transform: translateY(-50%) translateX(${(props) => (props.$isVisible ? 0 : '100%')});
   z-index: 999;
diff --git a/src/renderer/src/pages/home/Messages/MessageEditor.tsx b/src/renderer/src/pages/home/Messages/MessageEditor.tsx
index 827a078e61..73a021e22c 100644
--- a/src/renderer/src/pages/home/Messages/MessageEditor.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageEditor.tsx
@@ -172,7 +172,7 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
   }
 
   return (
-    <EditorContainer onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
+    <EditorContainer className="message-editor" onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
       {editedBlocks
         .filter((block) => block.type === MessageBlockType.MAIN_TEXT)
         .map((block) => (