Fixes issue & relayout

src/App.vue

@@ -5,36 +5,26 @@
       color="primary"
       dark
     >
-      <!-- Someone help me fix this horrid design -->
-      <v-container class="py-2 fill-height">
-        <v-row>
-          <v-col md="6">
-            <v-btn
-              text
-              link
-              v-for="link in links"
-              :key="link.id"
-              :to="link.to"
-              class="mr-1"
-            >
-              {{ $t(link.name) }}
-            </v-btn>
-          </v-col>
-          <v-col md="1">
-            <v-select
-              dense
-              :items="languageOptions"
-              label="Language"
-              :value="$i18n.locale"
-              @input="changeLocale"
-              outlined
-            />
-          </v-col>
-          <v-col md="5">
-            <SearchMenu />
-          </v-col>
-        </v-row>
-      </v-container>
+      <v-btn
+        text
+        link
+        v-for="link in links"
+        :key="link.id"
+        :to="link.to"
+        class="mr-1"
+      >
+        {{ $t(link.name) }}
+      </v-btn>
+      <v-select
+        dense
+        :items="languageOptions"
+        label="Language"
+        :value="$i18n.locale"
+        @input="changeLocale"
+        outlined
+        class="mt-6"
+      />
+      <SearchMenu />
     </v-app-bar>
 
     <v-main class="grey lighten-3">

src/routes/TrendingPage.vue

@@ -5,7 +5,7 @@
     <v-divider class="my-4" />
 
     <v-row v-for="(row, rowId) in chunkedByFour" :key="rowId">
-      <v-col md="3" v-for="(video, videoId) in row" :key="videoId">
+      <v-col md="2" v-for="(video, videoId) in row" :key="videoId">
         <VideoItem :video="video" />
       </v-col>
     </v-row>
@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     chunkedByFour () {
-      return _chunk(this.videos, 4)
+      return _chunk(this.videos, 6)
     }
   },
   components: {

src/store/watched-videos-db.js

@@ -13,8 +13,10 @@ export const WatchedVideosDB = new PouchDB('WatchedVideosDB', {
 export async function addWatchedVideo (videoObj, currentUrl) {
   return WatchedVideosDB.put({
     _id: generateRandomID(),
-    video: videoObj,
-    url: currentUrl,
+    video: {
+      ...videoObj,
+      url: currentUrl
+    },
     timestamp: new Date()
   })
 }