refactor(ExpandableText): enhance text truncation logic and update default labels

- Improved text truncation mechanism using a binary search for better performance and accuracy.
- Updated default expand and collapse button labels to lowercase for consistency.
- Increased default maxLines from 3 to 5 in MapInspector for improved content visibility.
- Removed unnecessary CSS clamping styles to streamline the component's appearance.

Author: JakeLin

packages/ui/src/components/ExpandableText/ExpandableText.module.css

@@ -11,25 +11,17 @@
   color: var(--ai-color-text-primary);
   white-space: pre-wrap;
   word-wrap: break-word;
-}
-
-/* Clamped State - Use line-clamp */
-.clamped {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: break-word;
 }
 
 /* Toggle Button */
 .toggleButton {
   display: inline;
-  margin-left: var(--ai-spacing-1);
   padding: 0;
   border: none;
   background: none;
   color: var(--ai-color-text-primary);
-  font-size: var(--ai-font-size-body-small);
+  font-size: inherit;
   font-weight: var(--ai-font-weight-medium);
   cursor: pointer;
   text-decoration: underline;

packages/ui/src/components/ExpandableText/ExpandableText.tsx

@@ -17,13 +17,13 @@ export interface ExpandableTextProps {
 
   /**
    * Label for expand button
-   * @default 'View more'
+   * @default 'view more'
    */
   expandLabel?: string;
 
   /**
    * Label for collapse button
-   * @default 'View less'
+   * @default 'view less'
    */
   collapseLabel?: string;
 
@@ -69,28 +69,80 @@ export interface ExpandableTextProps {
 export const ExpandableText: React.FC<ExpandableTextProps> = ({
   text,
   maxLines = 5,
-  expandLabel = 'View more',
-  collapseLabel = 'View less',
+  expandLabel = 'view more',
+  collapseLabel = 'view less',
   className,
   expanded: controlledExpanded,
   onExpandChange,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   const [needsTruncation, setNeedsTruncation] = useState(false);
+  const [truncatedText, setTruncatedText] = useState(text);
   const textRef = useRef<HTMLDivElement>(null);
 
   const isControlled = controlledExpanded !== undefined;
   const expanded = isControlled ? controlledExpanded : internalExpanded;
 
-  // Detect if text needs truncation
+  // JavaScript-based truncation to insert button inline
   useEffect(() => {
     const element = textRef.current;
-    if (!element) return;
+    if (!element || expanded) return;
 
-    // Compare scroll height with client height to determine if text is truncated
-    const isOverflowing = element.scrollHeight > element.clientHeight;
-    setNeedsTruncation(isOverflowing);
-  }, [text, maxLines]);
+    const checkAndTruncate = () => {
+      // Get line height
+      const styles = getComputedStyle(element);
+      const lineHeight = parseFloat(styles.lineHeight);
+      const maxHeight = lineHeight * maxLines;
+
+      // Create a temporary element to measure
+      const tempElement = element.cloneNode(true) as HTMLDivElement;
+      tempElement.style.position = 'absolute';
+      tempElement.style.visibility = 'hidden';
+      tempElement.style.width = element.offsetWidth + 'px';
+      tempElement.style.whiteSpace = 'pre-wrap';
+      tempElement.style.wordWrap = 'break-word';
+      document.body.appendChild(tempElement);
+
+      // Check if full text fits
+      tempElement.innerHTML = '';
+      tempElement.appendChild(document.createTextNode(text));
+
+      if (tempElement.scrollHeight <= maxHeight) {
+        setNeedsTruncation(false);
+        setTruncatedText(text);
+        document.body.removeChild(tempElement);
+        return;
+      }
+
+      // Binary search for truncation point
+      let low = 0;
+      let high = text.length;
+      let bestFit = text.substring(0, 50); // Default fallback
+
+      while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        const testText = text.substring(0, mid);
+
+        tempElement.innerHTML = '';
+        tempElement.textContent = testText + '... ' + expandLabel;
+
+        if (tempElement.scrollHeight <= maxHeight) {
+          bestFit = testText;
+          low = mid + 1;
+        } else {
+          high = mid - 1;
+        }
+      }
+
+      document.body.removeChild(tempElement);
+      setTruncatedText(bestFit);
+      setNeedsTruncation(true);
+    };
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(checkAndTruncate);
+    });
+  }, [text, maxLines, expanded, expandLabel]);
 
   const handleToggle = () => {
     if (isControlled) {
@@ -103,25 +155,39 @@ export const ExpandableText: React.FC<ExpandableTextProps> = ({
 
   return (
     <div className={cn(styles.expandableText, className)}>
-      <div
-        ref={textRef}
-        className={cn(styles.text, !expanded && styles.clamped)}
-        style={{
-          WebkitLineClamp: expanded ? 'unset' : maxLines,
-        }}
-      >
-        <SafeBrText text={text} />
+      <div ref={textRef} className={styles.text}>
+        {!expanded && needsTruncation ? (
+          <>
+            <SafeBrText text={truncatedText} />
+            ...{' '}
+            <button
+              className={styles.toggleButton}
+              onClick={handleToggle}
+              type="button"
+              aria-expanded={expanded}
+            >
+              {expandLabel}
+            </button>
+          </>
+        ) : (
+          <>
+            <SafeBrText text={text} />
+            {needsTruncation && expanded && (
+              <>
+                {' '}
+                <button
+                  className={styles.toggleButton}
+                  onClick={handleToggle}
+                  type="button"
+                  aria-expanded={expanded}
+                >
+                  {collapseLabel}
+                </button>
+              </>
+            )}
+          </>
+        )}
       </div>
-      {needsTruncation && (
-        <button
-          className={styles.toggleButton}
-          onClick={handleToggle}
-          type="button"
-          aria-expanded={expanded}
-        >
-          {expanded ? collapseLabel : expandLabel}
-        </button>
-      )}
     </div>
   );
 };

packages/ui/src/components/Map/MapInspector.tsx

@@ -154,7 +154,7 @@ export const MapInspector: React.FC<MapInspectorProps> = ({ location, onClose, c
               {location.description && (
                 <ExpandableText
                   text={location.description}
-                  maxLines={3}
+                  maxLines={5}
                   className={styles.description}
                 />
               )}