A long list with a visible scrollbar

// apps/docs/examples/ui/list-scroll-area.tsx'use client';
import {useState} from 'react';
import {ListScrollArea} from '@workspace/active-ui/components/composed/list-scroll-area';import {  Command,  CommandEmpty,  CommandInput,  CommandItem,  CommandList,} from '@workspace/active-ui/components/primitives/command';
const YEARS = Array.from({length: 120}, (_, index) => String(2026 - index));
/** * A long option list with a visible scrollbar. The command list gives up its * own height and overflow; the scroll area bounds and scrolls it. The arrow * keys keep the active option in view. */export default function ListScrollAreaExample() {  const [year, setYear] = useState('2026');  return (    <div className="grid w-full max-w-xs gap-2">      <Command className="rounded-md border">        <CommandInput placeholder="Search a year…" aria-label="Search a year" />        <ListScrollArea className="max-h-56" viewportClassName="p-1">          <CommandList className="max-h-none overflow-visible">            <CommandEmpty>No year found.</CommandEmpty>            {YEARS.map((value) => (              <CommandItem key={value} value={value} onSelect={setYear}>                {value}              </CommandItem>            ))}          </CommandList>        </ListScrollArea>      </Command>      <p className="text-muted-foreground text-sm">Chosen: {year}</p>    </div>  );}