From 040a3a894e0816596532d7f7430baa4a5524f67b Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <karan.jayachandra@nxp.com>
Date: Fri, 25 Jul 2025 14:17:07 +0200
Subject: Added the grid layout using custom css

---
 app/static/custom.css     | 19 ++++++++++++-------
 app/templates/controls.j2 |  2 +-
 app/templates/players.j2  |  6 ++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/static/custom.css b/app/static/custom.css
index fafc51a..18462d3 100644
--- a/app/static/custom.css
+++ b/app/static/custom.css
@@ -1,5 +1,6 @@
 button, input, .select, .select select {
     width: 100%;
+    height: 100%;
 }
 table {
     font-size: 17.5px;
@@ -7,13 +8,17 @@ table {
 td {
     width: 20%;
 }
-img {
-    position: absolute; 
-    top: 50%; 
-    left: 50%; 
-    transform: translate(-50%,-50%);
-}
 .center {
     margin: auto;
     width: 50%;
-}
\ No newline at end of file
+}
+.parent {
+    display: grid;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+}
+@media (min-width: 800px) {
+    .parent {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
diff --git a/app/templates/controls.j2 b/app/templates/controls.j2
index 0acf5a6..f67f745 100644
--- a/app/templates/controls.j2
+++ b/app/templates/controls.j2
@@ -1,6 +1,6 @@
 {% from "macros.j2" import court_button %}
 <div class="fixed-grid has-6-cols">
-    <div class="grid">
+    <div class="parent">
     {% for court in courts %}
         {{ court_button(court) }}
     {% endfor %}
diff --git a/app/templates/players.j2 b/app/templates/players.j2
index 16e3878..0499b73 100644
--- a/app/templates/players.j2
+++ b/app/templates/players.j2
@@ -6,15 +6,13 @@
 		<section class="section">
 			{{ navbar(url_for) }}
 			<h4 class="title is-4">Members</h4>
-			<div class="fixed-grid has-4-cols">
-            <div class="grid">
+            <div class="parent">
             {% for regular in regulars %}
                 <div class="cell"> {{ player_button(regular) }} </div>
             {% endfor %}
             </div>
 			<h4 class="title is-4">Guests</h4>
-			<div class="fixed-grid has-4-cols">
-			<div class="grid">
+			<div class="parent">
 			{% for guest in guests %}
                 <div class="cell"> {{ player_button(guest) }} </div>
             {% endfor %}
-- 
cgit v1.3.1