🐛 (grapher) fix cut-off action label

owid · May 26, 2024 · 7f92da8 · 7f92da8
1 parent 3bc1a35
commit 7f92da8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2666,6 +2666,7 @@ export class Grapher
 
                 {/* entity selector in a slide-in drawer */}
                 <SlideInDrawer
+                    grapherRef={this.base}
                     active={this.isEntitySelectorDrawerOpen}
                     toggle={() => {
                         this.isEntitySelectorModalOrDrawerOpen =

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -123,9 +123,6 @@ $zindex-controls-drawer: 150;
     border: 1px solid $frame-color;
     z-index: $zindex-chart;
 
-    // important for the slide-in drawer
-    overflow-x: clip;
-
     * {
         box-sizing: border-box;
     }

diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
@@ -12,6 +12,7 @@ export class SlideInDrawer extends React.Component<{
     active: boolean
     toggle: () => void
     children: React.ReactNode
+    grapherRef?: React.RefObject<HTMLDivElement>
 }> {
     @observable.ref visible: boolean = this.props.active // true while the drawer is active and during enter/exit transitions
     drawerRef: React.RefObject<HTMLDivElement> = React.createRef()
@@ -30,6 +31,14 @@ export class SlideInDrawer extends React.Component<{
         })
     }
 
+    componentDidUpdate(): void {
+        const grapherElement = this.props.grapherRef?.current
+        if (grapherElement) {
+            grapherElement.style.overflowX =
+                this.active || this.visible ? "clip" : "visible"
+        }
+    }
+
     @action.bound onDocumentKeyDown(e: KeyboardEvent): void {
         // dismiss menu on esc
         if (this.active && e.key === "Escape") this.toggleVisibility()