fix(vselect): prevent chips from changing field size

[kelliedlynch]

Description

Fixes issue #15980. Adjusted margins on chips in a v-select.

Also fixes #16029.

Motivation and Context

Chips in a v-select were 26px tall, which was forcing the fields to resize when they were added or removed.

How Has This Been Tested?

Tested visually with all 3 densities in Safari, Firefox, and Chrome

Markup:

<template>
  <v-app>
    <v-container>
      <v-select
        v-model="selected"
        :items="options"
        multiple
        chips
        closable-chips
        variant="outlined"
      />
      <v-select
        v-model="selected"
        :items="options"
        multiple
        chips
        closable-chips
        variant="outlined"
        density="compact"
      />
      <v-select
        v-model="selected"
        :items="options"
        multiple
        chips
        closable-chips
        variant="outlined"
        density="comfortable"
      />
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {

    },
    data: () => {
      return {
        options: ["op 1", "op 2", "op 3"],
        selected: ["op 1"],
      }
    }
  }
</script>

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [x] The PR title is no longer than 64 characters.
• [x] The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• [x] My code follows the code style of this project.
• [ ] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

without PR:

with PR:

Code

<template>
  <v-app>
    <v-container>
      <v-select
        v-model="selected"
        :items="options"
        multiple
        chips
        closable-chips
        variant="outlined"
      />
      <v-select
        v-model="selected"
        :items="options"
        multiple
        chips
        closable-chips
        variant="outlined"
        density="compact"
      />
      <v-select
        v-model="selected"
        :items="options"
        multiple
        chips
        closable-chips
        variant="outlined"
        density="comfortable"
      />

    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {

    },
    data: () => {
      return {
        options: [
          'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
          'Commodi, ratione debitis quis est labore voluptatibus!',
          'Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
        ],
        selected: ['Lorem ipsum dolor sit amet consectetur adipisicing elit.'],
      }
    },
  }
</script>