Game card layout improvements

src/components/GameBoard/List.vue

@@ -198,11 +198,10 @@ export default {
         }
 
         &.covers {
-            width: 300px;
-
             .games {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
+                grid-gap: $gp / 2;
             }
         }
 

src/components/GameCard/GameCard.vue

@@ -17,16 +17,16 @@
                 @click.native="openDetails"
             />
 
-            <div class="tags game-tag" v-if="!searchResult && hasTags">
-                <i class="fas fa-tag" @click="openTags" />
+            <i class="fas fa-tag tags" @click="openTags" />
 
+            <div class="game-tags" v-if="!searchResult && hasTags && list.view !== 'covers'">
                 <div
                     v-for="({ games, hex }, name) in tags"
                     :key="name"
                     v-if="games.includes(game.id)"
                 >
                     <button
-                        class="tag small game-tag"
+                        class="tag small"
                         :style="`background-color: ${hex}`"
                         v-if="games.includes(game.id)"
                         @click="openTags"
@@ -212,16 +212,21 @@ export default {
         }
 
         &.covers {
-            background-color: transparent;
-            grid-template-columns: $gameCoverWidth;
+            display: flex;
+            flex-direction: column;
 
             img {
-                align-self: flex-start;
+                width: 100%;
                 border-radius: $border-radius / 2;
             }
 
             .game-info {
-                display: none;
+                padding: $gp / 3;
+                font-size: 10px;
+
+                .tag {
+                    font-size: 10px;
+                }
             }
         }
 
@@ -262,14 +267,17 @@ export default {
             display: flex;
             flex-direction: column;
 
-            .tags {
+            .game-tags {
                 display: flex;
                 flex-wrap: wrap;
                 align-items: center;
+                margin-top: $gp / 4;
+            }
 
-                i {
-                    margin-right: $gp / 2;
-                }
+            i.tags {
+                position: absolute;
+                bottom: $gp * 1.5;
+                right: $gp / 4;
             }
 
             .game-rating, a {

src/styles/partials/_buttons.scss

@@ -43,7 +43,7 @@ button, a.link {
     -webkit-font-smoothing: inherit;
     -moz-osx-font-smoothing: inherit;
     -webkit-appearance: none;
-    height: 40px;
+    min-height: 40px;
     border: none;
     cursor: pointer;
     font-weight: bold;
@@ -55,7 +55,7 @@ button, a.link {
     }
 
     &.small {
-        height: $iconSmallSize;
+        min-height: $iconSmallSize;
         min-width: $iconSmallSize;
         padding: 0 $gp / 2;
     }
@@ -65,8 +65,10 @@ button, a.link {
     }
 
     &.tag {
-        height: 20px;
+        min-height: 20px;
+        font-size: 10px;
         color: $color-white;
+        margin-right: $gp / 2;
     }
 
     &.primary {