Merge pull request #242 from steppefox/KGS-183-button-size-bug

fix(ui): Issue #183 - Fix UI bug with room links in small tablet view

Author: leeschumacher

src/css/_chat.scss

@@ -467,27 +467,25 @@ a.ChatMessages-game-deleted {
 }
 
 .RoomGameLinks {
-  // background: $chat-message-bg;
-  margin: 20px 0 0 0;
-  // margin-bottom: 20px;
-  // border-bottom: 2px solid $chat-divider;
-  // padding-bottom: 20px;
+  display: flex;
+  margin: 20px 0 -10px -10px;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .RoomGameLink {
-  display: inline-block;
-  width: 49%;
+  display: block;
+  flex: 1 1 auto;
+  padding-left: 10px;
+  padding-bottom: 10px;
   line-height: 38px;
 
   a {
     display: block;
-    // background: $chat-message-bg;
-    // color: $link-color;
     border: 2px solid $very-muted;
     padding: 7px 10px 7px 10px;
     background: $content-bg;
     border-radius: 15px;
-    // max-width: 400px;
     font-size: 14px;
     box-sizing: border-box;
     height: 38px;
@@ -497,10 +495,6 @@ a.ChatMessages-game-deleted {
       border: 2px solid $muted;
     }
   }
-
-  &:first-child {
-    margin-right: 2%;
-  }
 }
 
 .no-touch .RoomGameLink a:hover {
@@ -514,21 +508,6 @@ a.ChatMessages-game-deleted {
   margin: 0 10px 0 5px;
 }
 
-@media #{$mobile-query} {
-  .RoomGameLink {
-    display: block;
-    width: auto;
-
-    &:first-child {
-      margin-right: 0;
-    }
-  }
-
-  .RoomGameLink+.RoomGameLink {
-    margin-top: 5px;
-  }
-}
-
 .RoomGameLink-label {
   display: inline-block;
   vertical-align: middle;