fix(VChip): overflow text in chip selections

[johnleider]

fixes #16472

Ideally this would exist on v-chip all of the time but it causes a breaking change when using icons/avatars with the start or end prop for alignment.

Description

Markup:

<template>
  <v-app>
    <v-main>
      <VCombobox
        v-model="chips"
        chips
        multiple
        clearable
        closable-chips
        clear-icon="mdi-close-circle-outline"
        :items="items"
        label="Your favorite hobbies"
        prepend-icon="mdi-filter-variant"
      />

      <v-card
        class="mx-auto"
        max-width="250"
      >
        <v-row
          align="center"
          class="pa-6"
        >
          <span class="me-4">To</span>

          <v-menu
            v-model="menu"
            location="top start"
            origin="top start"
            transition="scale-transition"
          >
            <template #activator="{ props }">
              <v-chip
                pill
                v-bind="props"
                link
              >
                <!-- <template #prepend> -->
                <v-avatar start>
                  <v-img src="https://cdn.vuetifyjs.com/images/john.png" />
                </v-avatar>
                <!-- </template> -->

                John Leider lorem ipsum
              </v-chip>
            </template>

            <v-card width="300">
              <v-list bg-color="black">
                <v-list-item>
                  <template #prepend>
                    <v-avatar image="https://cdn.vuetifyjs.com/images/john.png" />
                  </template>

                  <v-list-item-title>John Leider</v-list-item-title>

                  <v-list-item-subtitle>john@google.com</v-list-item-subtitle>

                  <template #append>
                    <v-list-item-action>
                      <v-btn
                        icon
                        variant="text"
                        @click="menu = false"
                      >
                        <v-icon>mdi-close-circle</v-icon>
                      </v-btn>
                    </v-list-item-action>
                  </template>
                </v-list-item>
              </v-list>

              <v-list>
                <v-list-item link prepend-icon="mdi-briefcase">
                  <v-list-item-subtitle>john@gmail.com</v-list-item-subtitle>
                </v-list-item>
              </v-list>
            </v-card>
          </v-menu>
        </v-row>

        <v-divider />

        <div class="pa-3">
          <v-text-field
            label="Subject"
            model-value="Re: Vacation Request"
            single-line
            variant="underlined"
          />

          <v-textarea
            label="Message"
            single-line
            variant="underlined"
          />
        </div>
      </v-card>
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  const chips = ref(['Programming', 'Playing video games', 'Sleeping'])
  const items = ref(['Streaming', 'Eating', 'Programming', 'Playing video games for many long time', 'Sleeping'])
  const menu = ref(false)
</script>

[yuwu9145]

Avatar part is working the same as v2, should be good enough