title: Vuetify router alignment
body: <p>I'm trying to setup at route that contains just a table with a layout inspired by the Vuetify team.
  I have a problem that the table does not take only a small part of the screen.</p>
  
  <p>I have tried using v-layout with "row", "column" and different paddings and marging.</p>
  
  <p>App.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;router-view/&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Menu.vue:</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-container&gt;
    &lt;v-navigation-drawer
        clipped
        fixed
        v-model="drawer"
        app
      &gt;
        &lt;v-list dense&gt;
          &lt;v-list-tile
          :to="{name: 'dashboard'}"
          &gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;dashboard&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;Dashboard&lt;/v-list-tile-title&gt;
            &lt;/v-list-tile-content&gt;
          &lt;/v-list-tile&gt;
          &lt;v-list-tile
          :to="{name: 'settings'}"
          &gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;settings&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;Settings&lt;/v-list-tile-title&gt;
            &lt;/v-list-tile-content&gt;
          &lt;/v-list-tile&gt;
          &lt;v-list-tile
          @click="logout();"
          &gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;logout&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;Logout&lt;/v-list-tile-title&gt;
            &lt;/v-list-tile-content&gt;
          &lt;/v-list-tile&gt;
        &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
      &lt;v-toolbar app fixed clipped-left&gt;
        &lt;v-toolbar-side-icon @click.stop="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
        &lt;v-toolbar-title&gt;Hello, {{ name }}&lt;/v-toolbar-title&gt;
      &lt;/v-toolbar&gt;
      &lt;v-content&gt;
        &lt;v-container fluid fill-height&gt;
          &lt;v-layout justify-center align-center&gt;
            &lt;v-flex shrink&gt;
              &lt;router-view&gt;&lt;/router-view&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-container&gt;
      &lt;/v-content&gt;
      &lt;v-footer app fixed&gt;
        &lt;span&gt;&amp;copy; arcyfelix 2019&lt;/span&gt;
      &lt;/v-footer&gt;
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'MainMenu',
    data() {
      return {
        drawer: false,
        name: 'Wojciech',
      };
    },
    methods: {
      logout() {
        this.$router.push({ name: 'home' });
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Dashboard.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-layout full-width&gt;
      &lt;v-data-table
        :items="desserts"
        class="elevation-1"
        hide-actions
        hide-headers
        expand
        :loading="true"
      &gt;
        &lt;template v-slot:items="props"&gt;
          &lt;td class="text-xs-left"&gt;2019-07-01&lt;/td&gt;
          &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
          &lt;td&gt;
            &lt;v-btn
            small
            depressed
            flat
            &gt;
              Edit
            &lt;/v-btn&gt;
          &lt;/td&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Dashboard',
    data() {
      return {
        desserts: [
          {
            name: 'Frozen Yogurt',
          },
          {
            name: 'Donut',
          },
          {
            name: 'KitKat',
          },
        ],
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>router.js:</p>
  
  <pre><code>import Vue from 'vue';
  import Router from 'vue-router';
  
  import Menu from './layouts/Menu.vue';
  import MainMenu from './layouts/MainMenu.vue';
  import Dashboard from './views/Dashboard.vue';
  import Login from './views/Login.vue';
  import Home from './views/Home.vue';
  
  Vue.use(Router);
  
  export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
        path: 'auth',
        name: 'auth',
        component: Menu,
        children: [
          {
            path: 'dashboard',
            name: 'dashboard',
            component: Dashboard,
          },
          {
            path: 'settings',
            name: 'settings',
            component: () =&gt; import(/* webpackChunkName: "about" */ './views/Settings.vue'),
          },
        ],
      },
      {
        path: '/',
        name: 'mainMenu',
        component: MainMenu,
        children: [
          {
            path: 'home',
            name: 'home',
            component: Home,
          },
          {
            path: 'login',
            name: 'login',
            component: Login,
          },
          {
            path: 'register',
            name: 'register',
            component: () =&gt; import(/* webpackChunkName: "about" */ './views/Register.vue'),
          },
        ],
      },
    ],
  });
  </code></pre>
  
  <p>I would like to take it 2/3 or full width of the screen.</p>