Truncate don't work in Command/Scroll area

[Natchii59]

Hello, I would like to have a combobox component, with a scrollable area. I set a fixed width to 200px. The problem is when the number of characters exceeds the width, my truncate attribute (from tailwindcss) doesn't work because of the ScrollArea. I tried without it and it works. Do you have a solution for using truncate with ScrollArea?

My code:

<CommandGroup heading={'Wallets'}>
  <ScrollArea className='h-[96px]'>
    {wallets.map(wallet => (
      <CommandItem
        key={wallet.id}
        onSelect={() => {
          setWallet(wallet)
          setPopoverOpen(false)
        }}
        className='text-sm'
      >
        <Avatar className='mr-2 h-5 w-5'>
          <AvatarImage
            src={`https://avatar.vercel.sh/${wallet.id}.png`}
            alt={wallet.name}
          />
          <AvatarFallback />
        </Avatar>

        <span className='flex-auto truncate'>{wallet.name}</span>  <----- HERE

        {selectWallet?.id === wallet.id && (
          <Icons.check className='h-4 w-4' />
        )}
      </CommandItem>
    ))}
  </ScrollArea>
</CommandGroup>

Screenshot:

[WangLarry]

@Natchii59 radix-ui/primitives#926 (comment)

[holdenmatt]

I was running into a similar issue (child elements of a ScrollArea not respecting w-full).

After finding this issue, here's a simple workaround for shadcn adapted from the radix-ui issue thread:

<ScrollArea className="[&>div>div]:!block">{children}</ScrollArea>