Select component: When we set max-height to Viewport and scroll down selection list, the list will move to the bottom of the page

[Mila168]

Bug report

Current Behavior

First, choose the first option in the list. Then, open the selection list and scroll down.
https://github.com/user-attachments/assets/ec638a0c-bb2c-4e3b-a26f-a5e241abd834

Expected behavior

The list won't move to the bottom of the page as the video shows.

Reproducible example

import {
  ChevronDownIcon,
  ChevronUpDownIcon,
  ChevronUpIcon,
} from '@heroicons/react/24/solid'
import * as Select from '@radix-ui/react-select'
import type React from 'react'
import { useState } from 'react'

type Option = {
  id: string
  value: string
}
export interface SelectProps {
  options: Option[]
  value?: string
}

export const SelectDemo: React.FC<SelectProps> = ({ value, options }) => {
  const [selectedValue, setSelectedValue] = useState(value)
  const handleValueChange = (value: string) => {
    setSelectedValue(value)
  }

  return (
    <div className="w-full relative">
      <Select.Root onValueChange={handleValueChange}>
        <Select.Trigger className="w-full inline-flex h-16 items-center justify-between rounded-lg bg-white px-4 leading-none shadow-[0_2px_10px] shadow-black/10 outline-none hover:bg-[#F2EFF3] focus:shadow-[0_0_0_2px] focus:shadow-black">
          <Select.Value>
            <span>{selectedValue}</span>
          </Select.Value>
          <Select.Icon asChild>
            <ChevronUpDownIcon className="h-5 w-5 text-gray-4" />
          </Select.Icon>
        </Select.Trigger>
        <Select.Portal>
          <Select.Content className="overflow-hidden bg-white shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] rounded-xl">
            <Select.ScrollUpButton className="inline-flex cursor-default items-center justify-center bg-white w-full h-8">
              <ChevronUpIcon className="w-5" />
            </Select.ScrollUpButton>
            <Select.Viewport className="max-h-48 overflow-auto">
              {options.map((option) => (
                <Select.Item
                  key={option.id}
                  value={option.value}
                  className={
                    'relative flex justify-between h-14 select-none items-center px-4 leading-none data-[disabled]:pointer-events-none data-[highlighted]:bg-[#F9F9F9] data-[disabled]:text-[#BCBAC7] data-[highlighted]:outline-none border-b border-b-[#F2F2F2]'
                  }
                >
                  <Select.ItemText>{option.value}</Select.ItemText>
                </Select.Item>
              ))}
              <Select.ScrollDownButton className="inline-flex cursor-default items-center justify-center bg-white w-full h-8">
                <ChevronDownIcon className="w-5" />
              </Select.ScrollDownButton>
            </Select.Viewport>
          </Select.Content>
        </Select.Portal>
      </Select.Root>
    </div>
  )
}

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	Select	2.1.4
React	n/a	18.2.0
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System