fix(dashboard): add tooltip to truncated variable names in dropdown fixes NV-6728 (#9606)

Author: ChmaraX

apps/dashboard/src/components/primitives/editor.tsx

@@ -158,6 +158,12 @@ const baseTheme = (options: { multiline?: boolean }) =>
       margin: '4px 0',
       padding: '4px',
       width: '100%',
+      overflowY: 'auto',
+      scrollbarWidth: 'none',
+      msOverflowStyle: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
     },
     '.cm-tooltip-autocomplete.cm-tooltip > ul > li[role="option"]': {
       display: 'flex',
@@ -174,8 +180,13 @@ const baseTheme = (options: { multiline?: boolean }) =>
       width: '100%',
       maxWidth: '100%',
       overflow: 'hidden',
+    },
+    '.cm-tooltip-autocomplete.cm-tooltip > ul > li[role="option"] .cm-completionLabel': {
+      overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
+      flex: '1',
+      minWidth: '0',
     },
     '.cm-tooltip-autocomplete.cm-tooltip > ul > li[aria-selected="true"]': {
       backgroundColor: 'hsl(var(--neutral-100))',

apps/dashboard/src/components/primitives/variable-editor.tsx

@@ -230,17 +230,27 @@ export function VariableEditor({
       return null;
     };
 
-    return autocompletion({
-      override: [dynamicCompletionSource],
-      closeOnBlur: true,
-      defaultKeymap: true,
-      activateOnTyping: true,
-      optionClass: (completion) => {
-        if (completion.type === 'new-variable') return 'cm-new-variable-option';
-        if (completion.type === 'new-translation-key') return 'cm-new-translation-option';
-        return '';
-      },
-    });
+    return [
+      autocompletion({
+        override: [dynamicCompletionSource],
+        closeOnBlur: true,
+        defaultKeymap: true,
+        activateOnTyping: true,
+        optionClass: (completion) => {
+          const classes = [];
+          if (completion.type === 'new-variable') classes.push('cm-new-variable-option');
+          if (completion.type === 'new-translation-key') classes.push('cm-new-translation-option');
+          return classes.join(' ');
+        },
+      }),
+      // Add native browser tooltips for long labels
+      EditorView.updateListener.of(() => {
+        document.querySelectorAll('li[role="option"]:not([title])').forEach((item) => {
+          const label = item.querySelector('.cm-completionLabel');
+          if (label?.textContent) item.setAttribute('title', label.textContent);
+        });
+      }),
+    ];
   }, []);
 
   const variablePluginExtension = useMemo(() => {
@@ -259,7 +269,7 @@ export function VariableEditor({
 
     // For props that rarely change, we can check them dynamically
     const baseExtensions = [...(callbacksRef.current.multiline ? [EditorView.lineWrapping] : []), variablePillTheme];
-    const allExtensions = [...baseExtensions, autocompletionExtension];
+    const allExtensions = [...baseExtensions, ...autocompletionExtension];
 
     // Add external extensions (including translation plugin) BEFORE variable plugin
     // This ensures translation patterns are processed first

apps/dashboard/src/components/truncated-text.tsx

@@ -18,35 +18,35 @@ export default function TruncatedText(props: TruncatedTextProps) {
   }, []);
 
   useLayoutEffect(() => {
-    const observer = new MutationObserver(checkTruncation);
-    if (textRef.current) observer.observe(textRef.current, { childList: true, subtree: true });
+    if (!textRef.current) return;
+
+    const element = textRef.current;
+    const mutationObserver = new MutationObserver(checkTruncation);
+    const resizeObserver = new ResizeObserver(checkTruncation);
+
+    mutationObserver.observe(element, { childList: true, subtree: true });
+    resizeObserver.observe(element);
 
     checkTruncation();
+
     window.addEventListener('resize', checkTruncation);
 
     return () => {
-      observer.disconnect();
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
       window.removeEventListener('resize', checkTruncation);
     };
-  }, [checkTruncation, children]);
+  }, [checkTruncation]);
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         {asChild ? (
-          <Slot
-            ref={textRef}
-            className={cn('truncate', { block: isTruncated, 'inline-flex': !isTruncated }, className)}
-            {...rest}
-          >
+          <Slot ref={textRef} className={cn('truncate block', className)} {...rest}>
             {children}
           </Slot>
         ) : (
-          <span
-            ref={textRef}
-            className={cn('truncate', { block: isTruncated, 'inline-flex': !isTruncated }, className)}
-            {...rest}
-          >
+          <span ref={textRef} className={cn('truncate block', className)} {...rest}>
             {children}
           </span>
         )}

apps/dashboard/src/components/variable/variable-list.tsx

@@ -201,7 +201,9 @@ const VariableListItem = ({
           <div className="flex size-3 items-center justify-center">
             <VariableIcon variableName={option.value} context={context} />
           </div>
-          <TruncatedText>{option.label}</TruncatedText>
+          <div className="min-w-0 flex-1">
+            <TruncatedText>{option.label}</TruncatedText>
+          </div>
           <CheckIcon className={cn('ml-auto size-4', selectedValue === option.value ? 'opacity-50' : 'opacity-0')} />
         </li>
       </TooltipTrigger>