Mostly design update +

- Chat cleaning
- Player hand size visibility

src/styles/layout/components/_components.scss

@@ -1,4 +1,6 @@
 @import "button";
 @import "card";
+@import "chat";
 @import "hand";
+@import "game";
 @import "deck";

src/styles/layout/components/chat.scss

@@ -0,0 +1,28 @@
+.chat {
+
+  &__list {
+    overflow-y: hidden;
+    word-wrap: break-word;
+    list-style-type: none;
+    padding: 0;
+    margin: 1rem 0;
+
+    &:hover {
+      overflow-y: scroll;
+    }
+  }
+
+  &-form {
+    display: flex;
+    flex-direction: column;
+
+    &__input {
+      background-color: #2e2e2e;
+      border: none;
+      color: #fff;
+      font-size: 1rem;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+    }
+  }
+}

src/styles/layout/components/game.scss

@@ -0,0 +1,25 @@
+.game {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  place-items: center;
+
+  &__players {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    width: 100%;
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/styles/layout/components/hand.scss

@@ -1,8 +1,7 @@
 .hand {
   display: flex;
-  flex-direction: row;
-  //justify-content: center;
-  flex-flow: nowrap !important;
+  max-width: 100%;
+  flex-flow: row nowrap !important;
   overflow-x: scroll;
   padding: 0.5rem;
   gap: 0.5rem;