Radix UI "Select" primitive overflows screen - html

Question

I'm using the "Select" component from Radix-UI Radix Ui Select and the modal that pops up is overflowing the top of the screen, please see the attached image. overflowing modal. But when i have a few options, it works fine, please see attached imae => fine modal
The select button:
const SelectButton = (props: Props) => {
function handleOnValueChange(newValue:string){
props.onChange(newValue)
}
return (
<SelectPrimitive.Root defaultValue="blueberry" onValueChange={handleOnValueChange}>
<SelectPrimitive.Trigger asChild aria-label="Food">
{props.children}
</SelectPrimitive.Trigger>
<SelectPrimitive.Content className="rounded-lg mt-4 top-5">
<SelectPrimitive.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
<ChevronUpIcon />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport className="bg-white dark:bg-black p-2 rounded-lg shadow-lg top-5">
<SelectPrimitive.Group>
{props.options.map(
(f, i) => (
<SelectPrimitive.Item
//disabled={f === "Grapes"}
key={`${f}-${i}`}
value={props.toLower == undefined ? f.toLowerCase() : f}
className={cx(
"relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900",
"radix-disabled:opacity-50",
"focus:outline-none select-none"
)}
>
<SelectPrimitive.ItemText>{f}</SelectPrimitive.ItemText>
<SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
<CheckIcon />
</SelectPrimitive.ItemIndicator>
</SelectPrimitive.Item>
)
)}
</SelectPrimitive.Group>
</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
<ChevronDownIcon />
</SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content>
</SelectPrimitive.Root>
);
};
export default SelectButton;