fix: allow to truncate tags

Author: rubenmoya

packages/react/src/components/tags/BaseTag/index.tsx

@@ -37,7 +37,7 @@ export const BaseTag = forwardRef<HTMLDivElement, Props>(
     >
       {left}
       {!!text && (
-        <span title={text} className="line-clamp-1">
+        <span title={text} className="line-clamp-1 truncate">
           {text}
         </span>
       )}

packages/react/src/components/tags/F0TagDot/F0TagDot.tsx

@@ -23,7 +23,7 @@ export const F0TagDot = forwardRef<HTMLDivElement, Props>(
         className="border-[1px] border-solid border-f1-border-secondary"
         left={
           <div
-            className="m-1 aspect-square w-2 rounded-full"
+            className="m-1 aspect-square h-2 w-2 rounded-full"
             style={{
               backgroundColor,
             }}

packages/react/src/components/tags/F0TagList/components/TagCounter.tsx

@@ -16,15 +16,18 @@ type Props = {
 export const TagCounter = ({ count, list }: Props) => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const counter = <F0TagRaw text={`+${count}`} />
+  const counter = <F0TagRaw text={`+${count}`} className="w-fit" />
 
   if (!list?.length) return counter
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
         <button
-          className={cn("inline-flex flex-shrink-0 items-center", focusRing())}
+          className={cn(
+            "inline-flex w-fit flex-shrink-0 items-center",
+            focusRing()
+          )}
         >
           {counter}
         </button>

packages/react/src/components/value-display/types/tagList.tsx

@@ -13,5 +13,10 @@ interface TagListValue {
 export type TagListCellValue = TagListValue
 
 export const TagListCell = (args: TagListCellValue) => (
-  <F0TagList type={args.type} tags={args.tags as TagVariant[]} max={args.max} />
+  <F0TagList
+    layout="fill"
+    type={args.type}
+    tags={args.tags as TagVariant[]}
+    max={args.max}
+  />
 )

packages/react/src/ui/OverflowList/index.tsx

@@ -149,15 +149,15 @@ const OverflowList = function OverflowList<T>({
       )}
 
       <div
-        className="flex items-center whitespace-nowrap"
+        className="flex min-w-0 items-center whitespace-nowrap"
         style={{ gap: gap > 0 ? `${gap}px` : undefined }}
         data-testid="overflow-visible-container"
       >
         {isInitialized &&
           visibleItems.map((item, index) => (
             <div
               key={`item-${index}`}
-              className="transition-all duration-150"
+              className="overflow-hidden transition-all duration-150"
               data-testid="overflow-visible-item"
               style={{ marginLeft: gap < 0 ? `${gap}px` : undefined }}
             >
@@ -176,7 +176,7 @@ const OverflowList = function OverflowList<T>({
                 <button
                   ref={overflowButtonRef}
                   className={cn(
-                    "inline-flex flex-shrink-0 items-center",
+                    "inline-flex w-fit flex-shrink-0 items-center",
                     focusRing()
                   )}
                 >

packages/react/src/ui/OverflowList/useOverflowCalculation.ts

@@ -86,8 +86,9 @@ export function useOverflowCalculation<T>(
         visibleCount++
       }
 
-      // Return the actual count without enforcing a minimum of 1
-      return Math.min(visibleCount, options?.max ?? items.length)
+      // Ensure we always show at least 1 item; it will truncate to fit
+      const capped = Math.min(visibleCount, options?.max ?? items.length)
+      return items.length > 0 ? Math.max(1, capped) : 0
     },
     [options?.max, items.length]
   )