[bug]: Overflow on select portal viewport when select items are too wide

[franzwilhelm]

Describe the bug

This can even be reproduced on the shadcn website:

When not enough screen real estate

The select trigger wraps as expected. The portal doesn't

When enough screen real estate

Everything works as expected

Affected component/components

select

How to reproduce

This snippet will cause overflow with the default select implementation

    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Placeholder" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="test">
            Sint eiusmod nostrud nostrud elit do eu. Exercitation aliquip nisi velit commodo
            exercitation qui ut anim. Magna nulla voluptate velit anim. Est eiusmod veniam nostrud
            reprehenderit velit tempor labore exercitation magna labore exercitation anim pariatur
            occaecat. Id duis exercitation id esse est esse sit nulla reprehenderit. Ipsum quis duis
            duis exercitation eiusmod excepteur velit.
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>

Is fixed by changing min-w to max-w here:

Another solution might be to use min-w-[var(--radix-select-trigger-width)] max-w-[100vw], to avoid maxing out on select trigger width for small triggers with larger portal viewports

Will submit a PR to fix this shortly

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Not relevant

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[kevinlandsberg]

+1