From a5a8afcaf8878d144c7cfa098075bcd120830115 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Wed, 3 Apr 2024 16:47:12 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(grapher)=20improve=20sizing=20on?=
 =?UTF-8?q?=20grapher=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/core/Grapher.tsx              |  4 +--
 site/GrapherPage.tsx                          | 20 ++++++-----
 site/css/chart.scss                           | 35 +++++++++++++------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 8529a3714a0..672a1ec8b99 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2090,8 +2090,8 @@ export class Grapher
     // If we have a big screen to be in, we can define our own aspect ratio and sit in the center
     @computed private get scaleToFitIdeal(): number {
         return Math.min(
-            (this.availableWidth * 0.95) / this.widthForDeviceOrientation,
-            (this.availableHeight * 0.95) / this.heightForDeviceOrientation
+            this.availableWidth / this.widthForDeviceOrientation,
+            this.availableHeight / this.heightForDeviceOrientation
         )
     }
 
diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
index aca49ae95d3..17aa8ba951b 100644
--- a/site/GrapherPage.tsx
+++ b/site/GrapherPage.tsx
@@ -123,15 +123,17 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
                     <nav id={GRAPHER_DRAWER_ID}></nav>
-                    <figure data-grapher-src={`/grapher/${grapher.slug}`}>
-                        <LoadingIndicator />
-                    </figure>
-                    <noscript id="fallback">
-                        <img
-                            src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${grapher.slug}.svg`}
-                        />
-                        <p>Interactive visualization requires JavaScript</p>
-                    </noscript>
+                    <div className="wrapper grapher-wrapper">
+                        <figure data-grapher-src={`/grapher/${grapher.slug}`}>
+                            <LoadingIndicator />
+                        </figure>
+                        <noscript id="fallback">
+                            <img
+                                src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${grapher.slug}.svg`}
+                            />
+                            <p>Interactive visualization requires JavaScript</p>
+                        </noscript>
+                    </div>
 
                     {((relatedArticles && relatedArticles.length !== 0) ||
                         (relatedCharts && relatedCharts.length !== 0)) && (
diff --git a/site/css/chart.scss b/site/css/chart.scss
index 5c8cb575934..f02dbbfeaf1 100644
--- a/site/css/chart.scss
+++ b/site/css/chart.scss
@@ -1,5 +1,26 @@
 @use "sass:math";
 
+// The landscape values
+$orientation-width: 680px;
+$orientation-height: 480px;
+$ideal-ratio: math.div($orientation-width, $orientation-height);
+
+$max-width-grapher: 1260px; // The rough max-width across all pages on the site
+$max-height-grapher: math.div($max-width-grapher, $ideal-ratio);
+
+.StandaloneGrapherOrExplorerPage main .grapher-wrapper {
+    padding-top: 16px;
+
+    @media (max-width: #{$orientation-width - 1}) {
+        margin: 0;
+        padding: 0;
+    }
+
+    @media (max-height: $orientation-width) {
+        padding-top: 0;
+    }
+}
+
 .StandaloneGrapherOrExplorerPage main figure[data-grapher-src],
 #fallback {
     display: flex;
@@ -9,14 +30,6 @@
     margin: 0 auto;
     width: 100%;
 
-    // The landscape values
-    $orientation-width: 680px;
-    $orientation-height: 480px;
-    $ideal-ratio: math.div($orientation-width, $orientation-height);
-
-    $max-width: 1250px; // The rough max-width across all pages on the site
-    $max-height: math.div($max-width, $ideal-ratio);
-
     // Charts shouldn't be below this height in any circumstance, whether mobile or not.
     // Except in iframes, where we override this.
     min-height: 540px;
@@ -39,9 +52,9 @@
         min-height: $orientation-height; // overwrite the min-height set above
     }
 
-    @media (min-width: $max-width) {
-        max-width: $max-width;
-        max-height: $max-height;
+    @media (min-width: $max-width-grapher) {
+        max-width: $max-width-grapher;
+        max-height: $max-height-grapher;
     }
 
     // Needed so the absolutely-positioned <LoadingIndicator> on /grapher pages is centered