From e3ec64151f869d2bf4f0c5db24808d91e04445ec Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Thu, 19 Oct 2023 09:24:52 +0000
Subject: [PATCH] fix(grapher): style leak on chart revision page

---
 .../grapher/src/captionedChart/CaptionedChart.tsx             | 2 +-
 packages/@ourworldindata/grapher/src/controls/Controls.scss   | 4 ++--
 .../@ourworldindata/grapher/src/controls/LabeledSwitch.scss   | 2 +-
 .../@ourworldindata/grapher/src/controls/SettingsMenu.scss    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

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;