💄 (grapher) don't use viewport height for grapher on mobile

owid · Feb 5, 2024 · fc13267 · fc13267
1 parent 96c16fd
commit fc13267
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 23 deletions.
diff --git a/site/blocks/KeyInsights.scss b/site/blocks/KeyInsights.scss
@@ -1,3 +1,5 @@
+$slide-content-height: $grapher-height;
+
 @import "react-horizontal-scrolling-menu/styles.css";
 
 .wp-block-owid-key-insights {
@@ -95,7 +97,7 @@
 
     .slides {
         figure.chart:not(.grapherPreview) {
-            height: var(--slide-content-height, $grapher-height);
+            height: $slide-content-height;
         }
 
         @include sm-only {
@@ -109,7 +111,7 @@
         @include lg-up {
             .wp-block-columns.is-style-sticky-right .wp-block-column {
                 &:first-child {
-                    height: var(--slide-content-height, $grapher-height);
+                    height: $slide-content-height;
                     overflow-y: auto;
                     -webkit-mask-image: linear-gradient(
                         180deg,

diff --git a/site/gdocs/components/AllCharts.scss b/site/gdocs/components/AllCharts.scss
@@ -5,13 +5,5 @@
 
     figure[data-grapher-src] {
         height: $grapher-height;
-
-        @include sm-only {
-            // 50px is the height of the header on mobile
-            // 40px is the height of the gallery navigation
-            // 1rem is the margin between the figure and the gallery navigation
-            // 1rem is additional padding
-            height: calc(100vh - 90px - 2rem);
-        }
     }
 }
diff --git a/site/gdocs/components/Chart.scss b/site/gdocs/components/Chart.scss
@@ -1,11 +1,5 @@
 figure.chart {
     height: $grapher-height;
-
-    @include sm-only {
-        // 50px is the height of the header on mobile
-        // 1rem is additional padding
-        height: calc(100vh - 50px - 1rem);
-    }
 }
 
 figure.explorer {

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -778,13 +778,6 @@ div.article-block__table--wide {
             width: 100%;
             > figure {
                 margin: 0;
-
-                @include sm-only {
-                    // 50px is the height of the header on mobile
-                    // 65px is the height of the navigation
-                    // 1rem is additional padding
-                    height: calc(100vh - 115px - 1rem);
-                }
             }
         }
     }