🐛 do not use full width on mobile for explorers (#3474)

owid · Apr 10, 2024 · 2514606 · 2514606
1 parent 2a4dd48
commit 2514606
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
@@ -40,6 +40,7 @@ export default function Chart({
     const resolvedUrl = linkedChart.resolvedUrl
     const isExplorer = url.isExplorer
     const hasControls = url.queryParams.hideControls !== "true"
+    const isExplorerWithControls = isExplorer && hasControls
 
     // config passed to grapher charts
     let customizedChartConfig: GrapherProgrammaticInterface = {}
@@ -84,15 +85,16 @@ export default function Chart({
     return (
         <div
             className={cx(d.position, className, {
-                "full-width-on-mobile": fullWidthOnMobile,
+                "full-width-on-mobile":
+                    !isExplorerWithControls && fullWidthOnMobile,
             })}
             style={{ gridRow: d.row, gridColumn: d.column }}
             ref={refChartContainer}
         >
             <figure
                 // Use unique `key` to force React to re-render tree
                 key={resolvedUrl}
-                className={isExplorer && hasControls ? "explorer" : "chart"}
+                className={isExplorerWithControls ? "explorer" : "chart"}
                 data-grapher-src={isExplorer ? undefined : resolvedUrl}
                 data-grapher-config={
                     isExplorer ? undefined : JSON.stringify(chartConfig)