fix(VList): correct styles for spacing with nav prop

[J-Sek]

fixes #20895

Markup:

<template>
  <v-app theme="dark">
    <v-card class="mx-auto" width="300">
      <v-list nav v-model:opened="open">
        <v-list-item border prepend-icon="mdi-home" title="Home"></v-list-item>

        <v-list-group value="Users">
          <template v-slot:activator="{ props }">
            <v-list-item
              border
              v-bind="props"
              prepend-icon="mdi-account-circle"
              title="Users"
            ></v-list-item>
          </template>

          <v-list-group value="Admin">
            <template v-slot:activator="{ props }">
              <v-list-item border v-bind="props" title="Admin"></v-list-item>
            </template>

            <v-list-item
              border
              v-for="([title, icon], i) in admins"
              :key="i"
              :prepend-icon="icon"
              :title="title"
              :value="title"
            ></v-list-item>
          </v-list-group>

          <v-list-group value="Actions">
            <template v-slot:activator="{ props }">
              <v-list-item border v-bind="props" title="Actions"></v-list-item>
            </template>

            <v-list-item
              border
              v-for="([title, icon], i) in cruds"
              :key="i"
              :prepend-icon="icon"
              :title="title"
              :value="title"
            ></v-list-item>
          </v-list-group>
        </v-list-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const open = ref(['Users'])

  const admins = [
    ['Management', 'mdi-account-multiple-outline'],
    // ['Settings', 'mdi-cog-outline'],
  ]
  const cruds = [
    ['Create', 'mdi-plus-outline'],
    ['Read', 'mdi-file-outline'],
    ['Update', 'mdi-update'],
    ['Delete', 'mdi-delete'],
  ]
</script>

[johnleider]

Wouldn't this be easier if we switched to using flex/flex-gap for spacing?