From 9ecc0ffdc6d7e540803c6965e4d5399f83b65095 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Thu, 1 Dec 2022 07:33:52 +0100
Subject: [PATCH] Use third grid column in graphs layout on wide screens
 (#2226)

* Use third grid column on graphs page when width > 1400px

* Define column width more precisely

* Center graphs inside containers

* Fix graphs always showing 2+ columns (dae)
---
 ts/graphs/Graph.svelte      | 4 ++--
 ts/graphs/GraphsPage.svelte | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/ts/graphs/Graph.svelte b/ts/graphs/Graph.svelte
index 4a86c39fc..530376c0f 100644
--- a/ts/graphs/Graph.svelte
+++ b/ts/graphs/Graph.svelte
@@ -9,8 +9,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let subtitle: string | null = null;
 </script>
 
-<TitledContainer {title}>
-    <div class="graph">
+<TitledContainer class="d-flex flex-column" {title}>
+    <div class="graph d-flex flex-grow-1 flex-column justify-content-center">
         {#if subtitle}
             <div class="subtitle">{subtitle}</div>
         {/if}
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 55f02a3f3..dad643365 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -56,9 +56,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .graphs-container {
         display: grid;
-        gap: 1.5em;
-        grid-template-columns: 50% 50%;
+        gap: 1em;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
 
+        @media only screen and (max-width: 1400px) {
+            grid-template-columns: 50% 50%;
+        }
         @media only screen and (max-width: 1200px) {
             grid-template-columns: 100%;
         }