QSelect: Constrain menu max-width

Account for appearing/disappearing menu scrollbars

Problem

This fix handles the case where scrollbars appear or disappear while the select menu is open. (Code from https://codepen.io/metalsadman/pen/PoOvqBB)

Fix

To demonstrate fix, click the 'Few options' select to open its menu, then drag the bottom of window to shorten the viewport until the menu has scrollbars. Notice that the menu items reactively change width to adjust for the appearance/disappearance of the scrollbar in the menu. View in Stackblitz ⚡️

This fix is based on code linked by @metalsadman in the github issues below. Fix developed and tested with chrome 128 on macos 14.6 with "Show scroll bars" set to "Always" in system preferences.

Related github issues

• [Q-Select] Dropdown width for long option items
• Q-Select dropdown menu over size
• [Q-Select] drop down width cannot be set

Install the dependencies

yarn
# or
npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev