From 123ee8dc8d624c78ee6f7f4f0d87033e8a470aff Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 19 May 2023 16:57:10 +0300
Subject: [PATCH] Handle team map pool display when 6 maps

---
 app/features/tournament/routes/to.$id.teams.tsx | 8 +++++++-
 app/features/tournament/tournament.css          | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/features/tournament/routes/to.$id.teams.tsx b/app/features/tournament/routes/to.$id.teams.tsx
index 7ff9461ff..6fe56b0b4 100644
--- a/app/features/tournament/routes/to.$id.teams.tsx
+++ b/app/features/tournament/routes/to.$id.teams.tsx
@@ -4,6 +4,7 @@ import { ModeImage, StageImage } from "~/components/Image";
 import { userPage } from "~/utils/urls";
 import type { FindTeamsByTournamentIdItem } from "../queries/findTeamsByTournamentId.server";
 import type { TournamentLoaderData } from "./to.$id";
+import clsx from "clsx";
 
 export default function TournamentTeamsPage() {
   const data = useOutletContext<TournamentLoaderData>();
@@ -56,7 +57,12 @@ function TeamMapPool({
   mapPool: NonNullable<FindTeamsByTournamentIdItem["mapPool"]>;
 }) {
   return (
-    <div className="tournament__team-with-roster__map-pool">
+    <div
+      className={clsx("tournament__team-with-roster__map-pool", {
+        "tournament__team-with-roster__map-pool__3-columns":
+          mapPool.length % 3 === 0,
+      })}
+    >
       {mapPool.map(({ mode, stageId }, i) => {
         return (
           <div key={i}>
diff --git a/app/features/tournament/tournament.css b/app/features/tournament/tournament.css
index f5fc5e621..9b553cb29 100644
--- a/app/features/tournament/tournament.css
+++ b/app/features/tournament/tournament.css
@@ -138,6 +138,10 @@
   overflow: hidden;
 }
 
+.tournament__team-with-roster__map-pool.tournament__team-with-roster__map-pool__3-columns {
+  grid-template-columns: max-content max-content max-content;
+}
+
 .tournament__team-with-roster__map-pool__mode-info {
   background-color: var(--bg-darker);
   display: flex;