From 481492868bea1e99afb34f359f25e34fd84fb67c Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Sun, 3 Mar 2024 00:25:36 +0100
Subject: [PATCH] Fix grid layout on PC screen

---
 formula10/static/style/grid.css      | 13 +++++++++++++
 formula10/templates/base.jinja       |  2 ++
 formula10/templates/result.jinja     |  2 +-
 formula10/templates/season.jinja     |  2 +-
 formula10/templates/statistics.jinja |  2 +-
 5 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 formula10/static/style/grid.css

diff --git a/formula10/static/style/grid.css b/formula10/static/style/grid.css
new file mode 100644
index 0000000..16b3f7b
--- /dev/null
+++ b/formula10/static/style/grid.css
@@ -0,0 +1,13 @@
+.card-grid {
+    grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
+    grid-row-gap: 0;
+    grid-column-gap: 8px;
+}
+
+@media only screen and (min-width: 470px) {
+    .card-grid {
+        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+        grid-row-gap: 0;
+        grid-column-gap: 8px;
+    }
+}
diff --git a/formula10/templates/base.jinja b/formula10/templates/base.jinja
index 883ae10..920ee41 100644
--- a/formula10/templates/base.jinja
+++ b/formula10/templates/base.jinja
@@ -176,6 +176,8 @@
     <link href="../static/style/bootstrap.css" rel="stylesheet">
     <script src="../static/script/bootstrap.bundle.js"></script>
 
+    <link href="../static/style/grid.css" rel="stylesheet">
+
     <script defer>
         {# Initialize Bootstrap Tooltips #}
         let tooltipTriggerList = document.querySelectorAll("[data-bs-toggle='tooltip']")
diff --git a/formula10/templates/result.jinja b/formula10/templates/result.jinja
index 2d8fc43..25fbf34 100644
--- a/formula10/templates/result.jinja
+++ b/formula10/templates/result.jinja
@@ -42,7 +42,7 @@
 
 {% block body %}
 
-    <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); grid-row-gap: 0; grid-column-gap: 8px;">
+    <div class="grid card-grid">
 
         <div class="card shadow-sm mb-2" style="max-width: 450px;">
             <div class="card-header">
diff --git a/formula10/templates/season.jinja b/formula10/templates/season.jinja
index e05a9fa..bf1b3ec 100644
--- a/formula10/templates/season.jinja
+++ b/formula10/templates/season.jinja
@@ -22,7 +22,7 @@
         </div>
     </div>
 
-    <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); grid-row-gap: 0; grid-column-gap: 8px;">
+    <div class="grid card-grid">
 
         {% for user in model.all_users_or_active_user() %}
 
diff --git a/formula10/templates/statistics.jinja b/formula10/templates/statistics.jinja
index 3555f81..e702bf5 100644
--- a/formula10/templates/statistics.jinja
+++ b/formula10/templates/statistics.jinja
@@ -16,7 +16,7 @@
         </div>
     </div>
 
-    <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); grid-row-gap: 0; grid-column-gap: 8px;">
+    <div class="grid card-grid">
 
         <div class="card mb-2">
             <div class="card-header">