From 4f74e92c4572685dae89bdd097633cf8f357c0a0 Mon Sep 17 00:00:00 2001
From: Rahix <rahix@rahix.de>
Date: Sat, 5 Oct 2024 01:16:33 +0200
Subject: [PATCH] succd: Fix layout on large screens

Make sure the grid cannot grow too large on big screens.  Also slightly
adjust the breakpoint to avoid some weird artifacts.
---
 succbone/succd/index.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/succbone/succd/index.html b/succbone/succd/index.html
index 6be0c1d..2a9cfaa 100644
--- a/succbone/succd/index.html
+++ b/succbone/succd/index.html
@@ -52,12 +52,20 @@ td > span {
     height: 10em;
 }
 
+.graph-container {
+    background-color: #e8e8e8;
+    text-align: center;
+}
+
 .main-grid {
-    margin: 2em;
+    margin-top: 2em;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 160em;
     clear: both;
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(50em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(54em, 1fr));
     column-gap: 2em;
     row-gap: 2em;
 }
@@ -136,9 +144,9 @@ td > span {
         </tr>
     </table>
 
-    <p>
+    <div class="graph-container">
         <canvas id="graph" width="1024" height="512" style="max-width: 100%;"></canvas>
-    </p>
+    </div>
 </div>
 
 <p style="font-style: italic; font-size: 12px; margin-top: 5em;">
@@ -170,7 +178,7 @@ let historicalDraw = (w, h) => {
     // coordinate calculation.
 
     canvas.clearRect(0, 0, w, h);
-    canvas.fillStyle = "#f0f0f0";
+    canvas.fillStyle = "#e8e8e8";
     canvas.fillRect(0, 0, w, h);
 
     // Margins of the main graph window.