✨ (grapher) improve sizing on grapher pages

owid · Apr 9, 2024 · a5a8afc · a5a8afc
1 parent 115bb3b
commit a5a8afc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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