From 1a619a7ac99363e9ae1f8fb2ce4dada18a327ba5 Mon Sep 17 00:00:00 2001
From: Dean Sofer <Dean.Sofer@sony.com>
Date: Tue, 14 May 2024 23:49:37 +0300
Subject: [PATCH] Fix mobile styling

---
 src/Game/Game.css  | 16 ++++++++++++----
 src/Game/Piece.css |  4 ++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Game/Game.css b/src/Game/Game.css
index df90677..42bcff2 100644
--- a/src/Game/Game.css
+++ b/src/Game/Game.css
@@ -16,7 +16,9 @@
 }
 
 .point {
+    display: flex;
     position: relative;
+    align-items: center;
     flex-basis: calc(100% / 14);
 
     &::before {
@@ -65,6 +67,9 @@
 
 /* landscape layout (tablet / computer) */
 @media (min-aspect-ratio: 1) {
+    .point {
+        flex-direction: column;
+    }
     .point:hover::before {
         border-top-color: blue !important;
     }
@@ -90,9 +95,10 @@
 
     /* bottom */
     :nth-child(n+13 of .point) {
-display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+
         &::before {
             border-top: none;
             border-bottom: 40vh solid black;
@@ -130,6 +136,7 @@ display: flex;
         }
     }
 
+    /* top */
     :nth-child(-n+12 of .point) {
         &::before {
             border-left: 40vw solid #f00;
@@ -141,8 +148,9 @@ display: flex;
             border-left-width: 30vw;
         }
     }
-
+    /* bottom */
     :nth-child(n+13 of .point) {
+        justify-content: flex-end;
         &::before {
             border-left: none;
             border-right: 40vw solid #f00;
diff --git a/src/Game/Piece.css b/src/Game/Piece.css
index 93a7c97..fb2f848 100644
--- a/src/Game/Piece.css
+++ b/src/Game/Piece.css
@@ -1,8 +1,8 @@
 .piece {
-    width: 100%;
+    width: 8vmin;
     aspect-ratio: 1;
     cursor: pointer;
-    border-radius: 50%;
+    /* border-radius: 50%; */
 
     &.white {
         /* background: white; */