How do I set the width of my web app with Vuetify 3?

I'm trying to create a web app that has an app bar and a main area that have the same basic layout as Stack Overflow: a maximum width on wider screens that then adjusts as the screen becomes narrower. I've gotten something like this working with Vuetify 2 but it's been surprisingly difficult for me to understand how to do this with Vuetify 3.

The answer seems to be:

• to set the width of the inner contents of the app bar, use an inner v-container that has a max-width CSS style set for it
• to set the width of the app, set the same max-width on a v-container.
• to have sidebars hide as the screen gets narrower, use @media queries that set display: none on the stuff that should be hidden and width: 100% on the stuff that should take up the whole width of the screen at that point.

Below's a CodePen showing a Stack Overflow-style layout where various divs disappear as the screen gets narrower. It isn't using Vuetify components for the inner divs but you could use v-row and v-col Vuetify components if you wanted a traditional two/three-column layout. The app bar and the main container are Vuetify components and their widths are set by manual CSS rather than Vuetify helper classes, as described above.

https://codepen.io/NathanWailes/pen/ExdzqBM

<script type="text/x-template" id="app-template">
  <v-app>
    <v-app-bar
      density="compact"
      elevation=0
    >
      <v-container class="inner-app-bar">
        <template v-slot:prepend>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </template>

        <v-app-bar-title>Stack Overflow</v-app-bar-title>

        <template v-slot:append>
          <v-btn icon="mdi-dots-vertical"></v-btn>
        </template>
      </v-container>
    </v-app-bar>

    <v-main>
      <v-container class="main-container">
        <div class="left-sidebar"></div>
        <div class="inner-content">
          <div class="question-header"></div>
          <div class="mainbar"></div>
          <div class="sidebar"></div>
        </div>
      </v-container>
    </v-main>
  </v-app>
</script>

<div id="app"></div>

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
}).use(vuetify).mount('#app')

.inner-app-bar {
  max-width: 1264px;
  background: darkolivegreen;
}
.inner-content {
  background: grey;
  height: 500px;
  display: inline-block;
  width: calc(100% - 164px);
}
.left-sidebar {
  width: 164px;
  background: darkslategrey;
  height: 500px;
  display: inline-block;
}
.question-header {
  height: 100px;
  background: orange;
}
.sidebar {
  float: right;
  width: 300px;
  height: 400px;
  background: #f1e5bc;
}
.v-container.main-container {
  max-width: 1264px;
  padding: 0;
  background: olive;
}
@media (max-width: 640px) {
  .left-sidebar {
    display: none;
  }
  .inner-content {
    width: 100%;
  }
}
@media (max-width: 980px) {
  .sidebar {
    display: none;
  }
}