diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx index 02af90e2f83..0fe28e2df9e 100644 --- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx +++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx @@ -279,7 +279,7 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> { <ContentSwitchers manager={this.manager} /> )} </div> - <div className="controls"> + <div className="chart-controls"> <EntitySelectionToggle manager={this.manager} /> <SettingsMenu manager={this.manager} diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss index e269fed57f5..737fa78542c 100644 --- a/packages/@ourworldindata/grapher/src/controls/Controls.scss +++ b/packages/@ourworldindata/grapher/src/controls/Controls.scss @@ -18,7 +18,7 @@ $indent: 15px; $control-row-height: 32px; // Buttons in the main controls row of the grapher view -nav.controlsRow .controls { +nav.controlsRow .chart-controls { display: flex; gap: 8px; @@ -120,7 +120,7 @@ nav.controlsRow .controls { // @at-root { .AdminApp { - nav.controlsRow .controls button.menu-toggle label { + nav.controlsRow .chart-controls button.menu-toggle label { margin: 0; } .settings-menu-contents section { diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss index 07c64aa08a2..63ac304dba6 100644 --- a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss +++ b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss @@ -9,7 +9,7 @@ $lato: $sans-serif-font-stack; @at-root { // placed either directly in controls row or in settings menu - .controlsRow .controls, + .controlsRow .chart-controls, .settings-menu-contents { // on/off switch with label written to the right .labeled-switch { diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss index 679691e093a..e72a2eb17e6 100644 --- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss +++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss @@ -17,7 +17,7 @@ $lato: $sans-serif-font-stack; $indent: 15px; $control-row-height: 32px; -nav.controlsRow .controls .settings-menu { +nav.controlsRow .chart-controls .settings-menu { // the pop-up version of the settings menu .settings-menu-controls { position: absolute;