Vuetify 3 - NavBar component taking up full viewport height

My NavBar component takes up the full viewport height even though its child elements do not:

I don't need all the white space here.

The child element v-app-bar inside v-app displays correctly and doesn't take up any extra space:

The hero section also takes up the right amount of space, but you can't see it until you scroll down past the bottom of the screen:

Here is my App.vue:

    <template>
  <NavBar />
  <HeroSection />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import NavBar from "./components/NavBar.vue";
import HeroSection from "./components/HeroSection.vue";

@Options({
  components: {
    NavBar,
    HeroSection,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss"></style>

Here is my NavBar.vue:

<!-- eslint-disable vue/valid-v-on -->
<template>
  <v-app :full-height="false" class="app-bar-container">
    <v-app-bar :elevation="2">
      <!-- eslint-disable-next-line vue/valid-v-on -->
      <v-app-bar-nav-icon @click="drawer = !drawer" id="hamburger-icon">
      </v-app-bar-nav-icon>
      <v-app-bar-title>The Candidate Consultants</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item v-for="item in menuItems" :key="item.title" @click="">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  VAppBar,
  VNavigationDrawer,
  VList,
  VListItem,
  VListItemTitle,
} from "vuetify/components";

export default defineComponent({
  components: {
    VAppBar,
    VNavigationDrawer,
    VList,
    VListItem,
    VListItemTitle,
  },
  setup() {
    const drawer = ref(false);
    const menuItems = [
      { title: "Home" },
      { title: "About" },
      { title: "Individuals" },
      { title: "Corporate" },
      { title: "Blog" },
      { title: "Contact" },
    ];

    return {
      drawer,
      menuItems,
    };
  },
});
</script>

<style scoped lang="scss">
.app-bar-container {
  height: auto;
}
</style>

And my HeroSection component:

<template>
  <div class="hero-section"></div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  name: "HeroSection",
})
export default class HeroSection extends Vue {}
</script>
<style lang="scss">
.hero-section {
  background-image: url("../assets/landing_hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
}
</style>

As you can see, I tried adding :full-height="false" to v-app as it says in the docs that full-height is true by default: https://vuetifyjs.com/en/api/v-app/

I also tried adding a class of .app-bar-container then giving it a height of auto to try and remove any default vuetify styles that may have been causing this.

My assumptions are:

1. That v-app-bar must be inside v-app.

2. That this layout is correct in App.vue, with the components themselves as direct child elements of <template>.

   <template>
   <NavBar />
   <HeroSection />
   </template>

Please help me to understand how to resolve this issue and how to lay these components out so they only take up the right amount of space moving forward. Thanks in advance!

Yes, v-app-bar must be inside v-app, as it depends on provided themes.

Vuetify is meant to contain the whole application, so the intended layout would be:

<v-app>
  <NavBar />
  <v-main>
    <HeroSection />
  </v-main>
</v-app>

If you do not want to use the Vuetify layout, I think your best option is to remove the min-height from the app wrapper:

  .v-application .v-application__wrap{
    min-height: unset;
    
  }