From eaab438b638c4a93528f00994a0aa8c2254d7f48 Mon Sep 17 00:00:00 2001
From: Daithi Hearn <daithi.hearn@gmail.com>
Date: Thu, 19 Jan 2023 17:28:53 +0100
Subject: [PATCH] Styling improvements for mobile

---
 src/components/Game/PlayersAndCards.tsx |  2 +-
 src/pages/Game/_game.scss               | 15 +++++++++++++--
 src/scss/_custom.scss                   |  1 -
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Game/PlayersAndCards.tsx b/src/components/Game/PlayersAndCards.tsx
index 6dcde26..7742d55 100644
--- a/src/components/Game/PlayersAndCards.tsx
+++ b/src/components/Game/PlayersAndCards.tsx
@@ -22,7 +22,7 @@ const PlayersAndCards = () => {
     return (
         <CardBody className="cardArea">
             <Container>
-                <Row>
+                <Row xs="6" sm="6" md="6" lg="6" xl="6">
                     {sortedPlayers.map(player => (
                         <PlayerCard
                             key={`playercard_${player.id}`}
diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
index 9037145..8ca023b 100644
--- a/src/pages/Game/_game.scss
+++ b/src/pages/Game/_game.scss
@@ -156,10 +156,21 @@
     }
 
     .overlay-score {
-        margin-top: 1.8em;
+        margin-top: 0.8em;
     }
 
     .overlay-chip {
-        margin-top: 4rem;
+        margin-top: 1rem;
+    }
+
+    .overlay-dealer-chip {
+        margin-top: 0.5rem;
+    }
+
+    .avatar {
+        vertical-align: middle;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
     }
 }
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index a08bfb1..8b03292 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -10,7 +10,6 @@ body {
 .main_content {
     background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(47, 133, 90,1)'/%3E%3Ccircle cx='40' cy='20' r='1' fill='%231a202c'/%3E%3Ccircle cx='0' cy='20' r='1' fill='%231a202c'/%3E%3Ccircle cx='20' cy='40' r='1' fill='%231a202c'/%3E%3Ccircle cx='20' cy='0' r='1' fill='%231a202c'/%3E%3Ccircle cx='38' cy='2' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='2' cy='38' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='38' cy='38' r='1' fill='%23ecc94b'/%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ecc94b'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
     background-color: #2f855a;
-    min-height: 800px;
     position: fixed;
     width: 100%;
     height: 100vh;