fix(VSelect): correct chips spacing for compact and comfortable

[patrickclerc]

Description

Adapt the SASS bottom margin of the select's chips for compact (3px) and comfortable density (2px) in order to avoid the chip and select underline collision.

Motivation and Context

Visually the chips in select field with density compact and comfortable are hoverred by the underline of the select which is not nice.

fixes #15686

How Has This Been Tested?

Visually tested using the below playground.

Markup:

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col cols="4">
          <h2>Density : compact</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : comfortable</h2>
        </v-col>
        <v-col cols="4">
          <h2>Density : default</h2>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            density="compact"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            density="comfortable"
            label="Standard variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            chips
            label="Standard variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="compact"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            density="comfortable"
            label="Plain variant"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            variant="plain"
            chips
            label="Plain variant"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="compact"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            density="comfortable"
            variant="outlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Outlined variant"
            chips
            variant="outlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="compact"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            density="comfortable"
            variant="underlined"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Underlined variant"
            chips
            variant="underlined"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="compact"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            density="comfortable"
            variant="solo"
          />
        </v-col>
        <v-col cols="4">
          <v-select
            :model-value="selected"
            :items="items"
            label="Solo variant"
            chips
            variant="solo"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data () {
      return {
        slider: 10,
        items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
        selected: 'Foo',
      }
    },
  }
</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)