I am trying out Vuetify and seem to be having some issues around the layout system. I am following the Application layout docs:
https://vuetifyjs.com/en/features/application-layout/

I want a simple sidebar, top bar and the router-view content in the centre to take the full width of the screen (minus the sidebar) and small padding of 32px. Currently the content seems to be shrunk / force down to a small size and off centre.

What is the correct way using the grid system to specify I want the v-main / v-container and content to take the whole width (12 columns) of the available space? The only thing that seems to work is forcing width values on elements which defeats the purpose of the grid layout system so obviously I am doing something wrong.

Could some please point me in the right direction?

App

<template>
  <v-layout class="rounded rounded-md">
    <!-- App Bar -->
    <v-app-bar app color="primary" dark>
      <v-app-bar-title>Dashboard</v-app-bar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-account-circle</v-icon>
      </v-btn>
    </v-app-bar> 

    <!-- Navigation Drawer -->
    <v-navigation-drawer app permanent color="primary" dark>
      <v-list dense>
        <v-list-item-group>
          <v-list-item :to="{ name: 'dashboard' }" link>
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <!-- Main Content -->
    <v-main app>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-layout>
</template>

<script setup lang="ts"></script>

Dashboard

<template>
  <v-card cols="12" md="12">
    <v-card-text>
      <v-tabs v-model="tab" bg-color="primary">
        <v-tab value="one">One</v-tab>
      </v-tabs>

      <v-card-text class="pa-0">
        <v-tabs-window v-model="tab">
          <v-tabs-window-item value="one">
            <v-list>
              <v-table>
            <thead>
              <tr>
                <th v-for="header in equipmentColumnHeaders" :key="header" class="text-left">{{ header }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="request in equipmentRequests" :key="request.ID">
                <td>{{ request.ID }}</td>
                <td>{{ request.requestedItem }}</td>
                <td>{{ request.status }}</td>
                <td>{{ request.requestDate }}</td>
              </tr>
            </tbody>
          </v-table>
            </v-list>
          </v-tabs-window-item>
        </v-tabs-window>
      </v-card-text>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const tab = ref('one')
const equipmentColumnHeaders = ['ID', 'Requested Item', 'Status', 'Request Date']
const equipmentRequests = reactive([
  { ID: 1, requestedItem: 'Laptop', status: 'Pending', requestDate: '2024-09-01' },
  { ID: 2, requestedItem: 'Projector', status: 'Approved', requestDate: '2024-08-15' },
  { ID: 3, requestedItem: 'Whiteboard', status: 'In Progress', requestDate: '2024-08-20' }
])
</script>