Odd issue with checkboxes and heights

[cfjedimaster]

I've got a simple list of checkboxes and it seems that a lot of vertical space is added to them. So for example, here is my view:

<template>
  <v-app>

    <v-main>

    <v-card elevation="2">
      <v-navigation-drawer permanent>

        <v-list dense nav>
          <v-list-item
            v-for="(kt, index) in cornTypes"
            :key="kt"
            link
            dense
            shrink
          >
            <v-list-item-content>
              <v-checkbox
                class="shrink mr-0 mt-0 mb-0"
                v-model="kernelTypesChecked[index]"
                :label="kt"
                dense
              ></v-checkbox>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    cornTypes: ["foo","goo","zoo"],
    kernelTypesChecked: [],
  })
};
</script>

Resulting in:

As you can see, I definitely threw a few things at it to try and fix it, but nothing quite worked. Any idea?

[cfjedimaster]

I noticed a tiny bit (maybe 10%) adding a class to list-item. It's definitely list related as 3 checkboxes on their own outside the list look fine.

<v-list-item
        v-for="(kt, index) in cornTypes"
        :key="kt"
        link
        dense
        shrink
        class="mt-0 mb-0"
>

[cfjedimaster]

Slightly better template example - less noise - same issue though.

<template>
  <v-app>
    <v-list dense="true">
      <v-list-item
        v-for="(kt, index) in cornTypes"
        :key="kt"
        dense="true"
        class="mt-0 mb-0"
      >
        <v-list-item-content>
          <v-checkbox
            class="shrink mr-0 mt-0 mb-0"
            v-model="kernelTypesChecked[index]"
            :label="kt"
            dense
          ></v-checkbox>
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-checkbox
      class="shrink mr-0 mt-0 mb-0"
      label="Ray"
      dense
    ></v-checkbox>
    <v-checkbox
      class="shrink mr-0 mt-0 mb-0"
      label="Maisie"
      dense
    ></v-checkbox>
    <v-checkbox
      class="shrink mr-0 mt-0 mb-0"
      label="Lindy"
      dense
    ></v-checkbox>

  </v-app>
</template>

[jacekkarczmarczyk]

You can slightly decrease the space by adding hide-details prop or for v-list-item v-simple-checkbox might be a better choice