fix(rich-md-editor): portal the toolbar + link card to body so a transformed ancestor can't offset them; align fade with the tooltip

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu.tsx

@@ -36,6 +36,10 @@ function hasFormattableSelection(editor: Editor, from: number, to: number): bool
 // a selection it stays put while the document scrolls instead of tracking the text — matching Linear.
 const FLOATING_OPTIONS = { strategy: 'fixed' } as const
 
+// Render into the body so a transformed/clipping ancestor (e.g. the mothership panels) can't reparent
+// the fixed-positioned toolbar and shift it off the selection.
+const APPEND_TO_BODY = () => document.body
+
 interface EditorBubbleMenuProps {
   editor: Editor
   /** The editor's scrollable viewport, used to keep the toolbar on-screen for selections taller than it. */
@@ -205,6 +209,7 @@ export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMen
       pluginKey={bubbleMenuKey}
       getReferencedVirtualElement={resolveAnchor}
       options={FLOATING_OPTIONS}
+      appendTo={APPEND_TO_BODY}
       role='toolbar'
       aria-label='Text formatting'
       updateDelay={0}
@@ -217,7 +222,7 @@ export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMen
         if (isPointerDownRef.current) return false
         return hasFormattableSelection(e, from, to)
       }}
-      className='fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-100 motion-reduce:animate-none'
+      className='fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-150 ease-out motion-reduce:animate-none'
     >
       {isEditingLink ? (
         <>

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card.tsx

@@ -3,6 +3,7 @@ import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/d
 import { getMarkRange } from '@tiptap/core'
 import type { Editor } from '@tiptap/react'
 import { Check, Copy, Pencil, Unlink } from 'lucide-react'
+import { createPortal } from 'react-dom'
 import { normalizeLinkHref } from '../markdown-fidelity'
 import { ToolbarButton } from './toolbar-button'
 
@@ -136,21 +137,22 @@ export function LinkHoverCard({ editor }: LinkHoverCardProps) {
     dismiss()
   }
 
-  return (
+  return createPortal(
     <div
       ref={floatingRef}
       style={{
         position: 'fixed',
         top: 0,
         left: 0,
         transform: position ? `translate(${position.x}px, ${position.y}px)` : undefined,
-        visibility: position ? 'visible' : 'hidden',
+        opacity: position ? 1 : 0,
+        pointerEvents: position ? undefined : 'none',
       }}
       role='dialog'
       aria-label='Link'
       onMouseEnter={cancelHide}
       onMouseLeave={scheduleHide}
-      className='fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-100 motion-reduce:animate-none'
+      className='z-[var(--z-popover)] flex items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm transition-opacity duration-150 ease-out'
     >
       {isEditing ? (
         <>
@@ -197,7 +199,8 @@ export function LinkHoverCard({ editor }: LinkHoverCardProps) {
           {canEdit && <ToolbarButton icon={Unlink} label='Remove link' onClick={removeLink} />}
         </>
       )}
-    </div>
+    </div>,
+    document.body
   )
 }