Use router link for routing from mini board

src/components/AddRemoveGame.vue

@@ -26,7 +26,6 @@
             class="cursor-pointer"
             :board="board"
             thumbnail
-            @click.native="$router.push({ name: 'board', params: { id: board.id } })"
           />
 
           <h3 class="mx-2">{{ board.name }}</h3>
@@ -110,7 +109,7 @@ export default {
       try {
         await this.$store.dispatch('SAVE_GAME_BOARD', board);
       } catch (e) {
-        // 
+        //
       }
     },
 

src/components/Board/StandardBoard.vue

@@ -88,5 +88,8 @@ export default {
 .standard-board {
   display: flex;
   justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  flex-direction: column;
 }
 </style>

src/components/CreateBoardSidebar.vue

@@ -39,6 +39,7 @@
         <MiniBoard
           class="mb-2"
           :board="sampleBoardWithRandomizedGames"
+          no-link
         />
 
         <b-form-checkbox

src/components/EditBoardSidebar.vue

@@ -54,6 +54,7 @@
         <MiniBoard
           class="mb-3"
           :board="previewBoard"
+          no-link
         />
 
         <b-form-checkbox

src/components/Game/GameInBoards.vue

@@ -7,6 +7,7 @@
       :key="board.id"
       :board="board"
       class="mb-3"
+      no-link
       @click.native="handleBoardClick(board.id)"
     />
   </div>

src/components/WallpaperDetailsSidebar.vue

@@ -71,6 +71,7 @@
           v-for="board in formattedBoards"
           :key="board.id"
           :board="board"
+          no-link
           @click.native="setAsBoardWallpaper(board)"
         />
       </b-collapse>

src/pages/BoardsPage.vue

@@ -28,52 +28,51 @@
           {{ $t('boards.create') }}
         </b-button>
       </EmptyState>
-  
+
       <div v-else class="board-grid pb-3">
         <MiniBoard
           v-for="board in sortedBoards"
           :key="board.id"
           :board="board"
-          @click.native="$router.push({ name: 'board', params: { id: board.id } })"
         />
       </div>
     </div>
   </template>
-  
+
   <script>
   import MiniBoard from '@/components/Board/MiniBoard';
   import EmptyState from '@/components/EmptyState';
   import { mapState, mapGetters } from 'vuex';
-  
+
   export default {
     components: {
       MiniBoard,
       EmptyState,
     },
-  
+
     data() {
       return {
         loading: false,
       };
     },
-  
+
     computed: {
       ...mapState(['user', 'boards', 'wallpapers']),
       ...mapGetters(['isBoardOwner', 'sortedBoards', 'sortedPublicBoards', 'darkTheme', 'navPosition']),
-  
+
       recentlyUpdatedPublicBoards() {
         return this.sortedPublicBoards.filter(({ lastUpdated }) => Boolean(lastUpdated)).slice(0, 20);
       },
-  
+
       isEmpty() {
         return this.boards?.length === 0;
       },
     },
-  
+
     mounted() {
       this.loadBoards()
     },
-  
+
     methods: {
       async loadBoards() {
         this.loading = this.boards?.length === 0;
@@ -83,40 +82,39 @@
             this.loading = false;
             this.$store.commit('SET_SESSION_EXPIRED', true);
           });
-  
+
         this.loading = false;
-  
+
         if(!this.boards?.length) this.$emit('empty');
       },
-  
+
       async loadPublicBoards() {
         await this.$store.dispatch('LOAD_PUBLIC_BOARDS')
           .catch((e) => {
             this.loading = false;
             this.$store.commit('SET_SESSION_EXPIRED', true);
           });
-  
+
         this.loading = false;
       },
-  
+
       viewPublicBoard(id) {
         this.$router.push({ name: 'public.board', params: { id } });
       },
-  
+
       async deleteBoard(id) {
         this.loading = true;
-  
+
         await this.$store.dispatch('DELETE_BOARD', id)
           .catch(() => {
             this.loading = false;
-  
+
             this.$bvToast.toast('There was an error deleting board', { variant: 'error' });
           });
-  
+
         this.loading = false;
         this.$bvToast.toast('Board removed');
       },
     },
   };
   </script>
-  

src/pages/HomePage.vue

@@ -17,7 +17,6 @@
           v-for="board in recentlyUpdatedPublicBoards"
           :key="board.id"
           :board="board"
-          @click.native="$router.push({ name: 'board', params: { id: board.id } })"
         />
       </div>
 

src/pages/PublicBoardsPage.vue

@@ -7,7 +7,6 @@
           v-for="board in sortedPublicBoards"
           :key="board.id"
           :board="board"
-          @click.native="$router.push({ name: 'board', params: { id: board.id } })"
         />
       </div>
     </div>

src/pages/PublicProfilePage.vue

@@ -66,8 +66,6 @@
           v-for="board in userBoards"
           :key="board.id"
           :board="board"
-          @click.native="$router.push({ name: 'board', params: { id: board.id } })"
-          class="p-relative mb-3"
         />
       </div>
     </div>