v-autocomplete/v-select width changes depending on item length (Vue/Vuetify 3)

The selection menu of the autocomplete/select changes according to the text length of the item. For example, when the items are about 5 characters long, the menu's length is the same as the dropdown, but the width of the menu grows if the item text is very long as shown in the example below. Is there any way to fix the width of the menu to the dropdown's width instead?

Solution: The length of the menu items can be restricted by passing a prop to the menu component by doing :menu-props="{ maxWidth: 0 }"

Additionally, if the text is too long and the truncated text does not make sense, you can do the following so that text wraps around(using white-space: normal):

Assumption: you have defined the props as following: (you can use any property for item-value and item-title)

:menu-props="{ maxWidth: 0 }"
:item-props="{ density: 'compact' }"
item-value="value"
item-title="label"

Write the item slot in v-autocomplete/v-select:

<template #item="{ item, props }">
  <v-list-item v-bind="props">
    <template #title>{{ item.title }}</template>
  </v-list-item>
</template>

Then, use the following scoped css with the deep selector to override the css of vuetify components:

<style scoped lang="scss">
  :deep(.v-list-item) {
    max-height: 30px !important;
  }

  :deep(.v-list-item-title) {
    font-size: 0.8rem !important;
    white-space: normal !important;
  }
</style>

Credits to the sources below for giving me reference for this solution: https://github.com/vuetifyjs/vuetify/issues/17751 Customizing item-text in v-select