fix(grapher): ensure grapher frame is visibile when embedded via an i…

…frame
owid · Oct 9, 2023 · b0646b9 · b0646b9
1 parent 45e9f9f
commit b0646b9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -172,7 +172,12 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
     }
 
     @computed protected get bounds(): Bounds {
-        return this.props.bounds ?? this.manager.tabBounds ?? DEFAULT_BOUNDS
+        return (
+            this.props.bounds ??
+            // right padding prevents grapher's frame to be obscured by the chart/map
+            this.manager.tabBounds?.padRight(2) ??
+            DEFAULT_BOUNDS
+        )
     }
 
     @computed protected get boundsForChartArea(): Bounds {

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -111,8 +111,7 @@ $zindex-controls-drawer: 140;
     container-type: size;
     container-name: grapher;
 
-    // use box-shadow instead of border to make sure the border is in the foreground
-    box-shadow: 0 0 0 1px $frame-color; // equivalent to `border: 1px solid $frame-color`
+    border: 1px solid $frame-color;
     z-index: $zindex-chart;
 
     * {
@@ -171,7 +170,7 @@ $zindex-controls-drawer: 140;
 // and the left and right borders are hidden. the top and bottom borders are visible,
 // but stretch across the entire page.
 .GrapherComponent.optimizeForHorizontalSpace {
-    box-shadow: none;
+    border: none;
 
     // adds top and bottom borders that stretch across the entire page.
     // since we don't know the width of the page, we use a large number (200vw)