improvement(canvas): improve code tooltip readability (#7138)

Author: waleedlatif1

packages/emcn/src/components/popover/popover.tsx

@@ -363,8 +363,8 @@ interface PopoverContentProps
   disablePortal?: boolean
   /** Maximum height in pixels */
   maxHeight?: number
-  /** Maximum width in pixels. Enables text truncation when set. */
-  maxWidth?: number
+  /** Maximum width in pixels or as a CSS length. Enables text truncation when set. */
+  maxWidth?: number | string
   /** Minimum width in pixels */
   minWidth?: number
   /**
@@ -537,7 +537,9 @@ const PopoverContent = React.forwardRef<
 
     const effectiveMaxWidth =
       maxWidth !== undefined
-        ? `${maxWidth}px`
+        ? typeof maxWidth === 'number'
+          ? `${maxWidth}px`
+          : maxWidth
         : appearance === 'tooltip'
           ? `min(${TOOLTIP_MAX_WIDTH_PX}px, calc(100vw - 2rem))`
           : undefined

packages/workflow-renderer/src/lib/code-hover-card.tsx

@@ -17,14 +17,15 @@ const OPEN_DELAY_MS = 300
 const TRIGGER_EXIT_GRACE_MS = 600
 const CONTENT_EXIT_GRACE_MS = 120
 const CODE_TOOLTIP_MAX_HEIGHT_PX = 256
+const CODE_TOOLTIP_MAX_WIDTH = 'min(480px, calc(100vw - 2rem))'
 
 interface CodeHoverCardProps {
   preview: CodePreview
   className: string
   children: ReactNode
 }
 
-/** Interactive, two-axis-scrollable source preview anchored to a canvas code chip. */
+/** Interactive, vertically scrollable source preview anchored to a canvas code chip. */
 export function CodeHoverCard({ preview, className, children }: CodeHoverCardProps) {
   const [open, setOpen] = useState(false)
   const contentId = useId()
@@ -164,6 +165,7 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
         collisionPadding={16}
         appearance='tooltip'
         maxHeight={CODE_TOOLTIP_MAX_HEIGHT_PX}
+        maxWidth={CODE_TOOLTIP_MAX_WIDTH}
         onPointerEnter={clearCloseTimer}
         onPointerLeave={() => scheduleClose(CONTENT_EXIT_GRACE_MS)}
         onFocus={clearCloseTimer}
@@ -174,9 +176,12 @@ export function CodeHoverCard({ preview, className, children }: CodeHoverCardPro
         <Code.Viewer
           code={preview.code}
           language={preview.language}
+          showGutter
+          wrapText
           density='compact'
+          paddingLeft={8}
           highlightWorkflowReferences
-          className='max-h-[min(16rem,calc(100vh-2rem))] min-h-0 rounded-none border-0 bg-[var(--bg)] shadow-none dark:bg-[var(--bg)]'
+          className='max-h-[min(16rem,calc(100vh-2rem))] min-h-0 overflow-x-hidden rounded-none border-0 bg-[var(--bg)] shadow-none dark:bg-[var(--bg)]'
         />
       </PopoverContent>
     </Popover>

packages/workflow-renderer/src/lib/overflow-span-mount.test.tsx

@@ -68,10 +68,16 @@ describe('OverflowSpan code preview', () => {
     const preview = document.querySelector('[data-code-hover-card]')
     expect(preview).toHaveTextContent('line 20')
     expect(preview).toHaveClass('w-fit', 'max-w-[min(16rem,calc(100vw-2rem))]', 'shadow-sm')
-    expect(preview).toHaveStyle({ maxWidth: 'min(256px, calc(100vw - 2rem))' })
-    expect(preview?.querySelector('.overflow-x-auto')).toHaveClass('overflow-y-auto')
-    expect(preview?.querySelector('.tabular-nums')).toBeNull()
-    expect(preview?.querySelector('pre')).toHaveClass('px-2', 'py-1.5', 'text-caption', 'leading-5')
+    expect(preview).toHaveStyle({ maxWidth: 'min(480px, calc(100vw - 2rem))' })
+    expect(preview?.querySelector('.overflow-x-hidden')).toHaveClass('overflow-y-auto')
+    expect(preview?.querySelector('.tabular-nums')).toHaveTextContent('1')
+    expect(preview?.querySelector('.code-editor-theme > div')).toHaveStyle({ paddingLeft: '8px' })
+    expect(preview?.querySelector('pre')).toHaveClass(
+      'whitespace-pre-wrap',
+      'break-words',
+      'text-caption',
+      'leading-5'
+    )
   })
 
   it('stays open while the pointer crosses into the scrollable preview', () => {