From cf8c1ff3791b3422cd90e90424eee0af885eed82 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 20 May 2023 22:49:36 +0300
Subject: [PATCH] Better final standings layout for mobile

---
 .../routes/to.$id.brackets.tsx                |  1 +
 .../tournament-bracket/tournament-bracket.css | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/features/tournament-bracket/routes/to.$id.brackets.tsx b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
index 1ebb92eb2..c5ea00b09 100644
--- a/app/features/tournament-bracket/routes/to.$id.brackets.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
@@ -466,6 +466,7 @@ function FinalStandings({ standings }: { standings: FinalStanding[] }) {
           <div
             className="tournament-bracket__standing"
             key={standing.tournamentTeam.id}
+            data-placement={standing.placement}
           >
             <div>
               <Placement placement={standing.placement} size={40} />
diff --git a/app/features/tournament-bracket/tournament-bracket.css b/app/features/tournament-bracket/tournament-bracket.css
index 71a63a3bf..4dc5bb0ba 100644
--- a/app/features/tournament-bracket/tournament-bracket.css
+++ b/app/features/tournament-bracket/tournament-bracket.css
@@ -254,15 +254,33 @@
 .tournament-bracket__standings {
   background-color: var(--bg-lighter-transparent);
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
   border-radius: var(--rounded);
   padding: var(--s-3);
   gap: var(--s-2);
   max-width: max-content;
   margin: 0 auto;
 }
-.tournament-bracket__stadings__full-row-taker {
-  grid-column: 1 / 4;
+[data-placement="1"] {
+  order: -1;
+}
+[data-placement="2"] {
+  order: -1;
+}
+
+@media screen and (min-width: 480px) {
+  .tournament-bracket__standings {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .tournament-bracket__stadings__full-row-taker {
+    grid-column: 1 / 4;
+  }
+  [data-placement="1"] {
+    order: unset;
+  }
+  [data-placement="2"] {
+    order: unset;
+  }
 }
 
 .tournament-bracket__standing {