Workaround for nuxtjs layout bug

frontend/layouts/default.vue

@@ -4,9 +4,7 @@
         <v-content>
             <v-container fill-height>
                 <v-row no-gutters justify="center">
-                    <v-col cols="12" sm="8" md="6">
                     <nuxt />
-                    </v-col>
                 </v-row>
             </v-container>
         </v-content>

frontend/layouts/wide.vue

@@ -1,28 +0,0 @@
-<template>
-    <v-app>
-        <Navbar />
-        <v-content>
-            <v-container fill-height>
-                <v-row no-gutters justify="center">
-                    <v-col cols="12">
-                        <nuxt />
-                    </v-col>
-                </v-row>
-            </v-container>
-        </v-content>
-    </v-app>
-</template>
-
-<script>
-import Navbar from '@/components/Navbar'
-
-export default {
-    components: { Navbar },
-}
-</script>
-
-<style>
-html {
-    overflow-y: auto;
-}
-</style>

frontend/pages/account.vue

@@ -1,4 +1,5 @@
 <template>
+    <v-col cols="12" sm="8" md="6">
         <v-card color="primary" dark>
             <v-btn icon to="/">
                 <v-icon>mdi-arrow-left</v-icon>
@@ -24,6 +25,7 @@
                 </v-tab-item>
             </v-tabs-items>
         </v-card>
+    </v-col>
 </template>
 
 <script>

frontend/pages/index.vue

@@ -1,48 +1,33 @@
 <template>
-    <v-container>
-        <v-row dense>
     <v-col cols="12">
-                <v-card color="#385F73" dark>
+        <v-container fluid>
+            <v-row>
+                <v-col
+                    v-for="(item, index) in items"
+                    :key="index"
+                    class="d-flex"
+                    cols="12"
+                    lg="6"
+                >
+                    <v-card
+                        :color="item.color"
+                        dark
+                        style="min-height: 350px; width: 100%;"
+                    >
                         <v-card-title class="headline">
-                        Unlimited notes now
+                            {{ item.title }}
                         </v-card-title>
                         <v-card-subtitle>
-                        Listen to your favorite artists and albums whenever and
+                            {{ item.content }}
-                        wherever, online and offline.
                         </v-card-subtitle>
                         <v-card-actions>
                             <v-btn text>See a demo</v-btn>
                         </v-card-actions>
                     </v-card>
                 </v-col>
-            <v-col cols="12">
-                <v-card color="#1F7087" dark>
-                    <v-card-title class="headline">
-                        Wow
-                    </v-card-title>
-                    <v-card-subtitle>
-                        You can even search your notes
-                    </v-card-subtitle>
-                    <v-card-actions>
-                        <v-btn text>Create an account</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-col>
-            <v-col cols="12">
-                <v-card color="#952175" dark>
-                    <v-card-title class="headline">
-                        babar
-                    </v-card-title>
-                    <v-card-subtitle>
-                        You notes are safe with us
-                    </v-card-subtitle>
-                    <v-card-actions>
-                        <v-btn text>Privacy policy</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-col>
             </v-row>
         </v-container>
+    </v-col>
 </template>
 
 <script>
@@ -51,8 +36,36 @@ export default {
     options: {
         auth: false,
     },
+    data: () => ({
+        items: [
+            {
+                title: 'Writes your notes in markdown',
+                content:
+                    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut consectetur debitis harum' +
+                    ' illum in incidunt maxime modi quae velit? Aspernatur, consequatur error' +
+                    ' mollitia nesciunt officiis porro ratione sequi voluptas?',
+                color: 'indigo',
+            },
+            {
+                title: '',
+                content: '',
+                color: 'purple',
+            },
+            {
+                title: '',
+                content: '',
+                color: 'warning',
+            },
+            {
+                title: '',
+                content: '',
+                color: 'teal darken-2',
+            },
+        ],
+    }),
     head: () => ({
         title: 'Home',
     }),
 }
 </script>
+&

frontend/pages/notes.vue

@@ -1,4 +1,5 @@
 <template>
+    <v-col cols="12">
         <v-data-table
             :headers="headers"
             :items="notes"
@@ -51,6 +52,7 @@
                 <v-btn color="primary" @click="initialize">Reset</v-btn>
             </template>
         </v-data-table>
+    </v-col>
 </template>
 
 <script>
@@ -59,7 +61,6 @@ import { format } from 'timeago.js'
 export default {
     name: 'Notes',
     title: 'Notes',
-    layout: 'wide',
     data: () => ({
         loading: true,
         notes: [],