diff --git a/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.scss b/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.scss
index 6a4e399a92e..037f8742e70 100644
--- a/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.scss
@@ -54,7 +54,7 @@
         border-radius: 4px;
         background: white;
         box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
-        z-index: $zindex-controls-drawer;
+        z-index: $zindex-controls-popup;
 
         &:before {
             display: inline-block;
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
index e72a2eb17e6..af5f6796962 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -26,7 +26,7 @@ nav.controlsRow .chart-controls .settings-menu {
         background: white;
         border-radius: 4px;
         box-shadow: 0px 4px 23px 4px #0000000f;
-        z-index: $zindex-controls-drawer;
+        z-index: $zindex-controls-popup;
         overflow-y: scroll;
     }
 
@@ -41,281 +41,205 @@ nav.controlsRow .chart-controls .settings-menu {
     }
 }
 
-@at-root {
-    // the drawer version of the settings menu (see GRAPHER_SETTINGS_DRAWER_ID)
-    nav#grapher-settings-drawer .settings-menu-contents {
-        .settings-menu-controls {
-            position: fixed;
-            right: 0;
-            top: 0;
-            width: 300px;
-            height: 100vh;
-            z-index: $zindex-controls-drawer;
-            overflow-y: scroll;
+.settings-menu-contents {
+    .settings-menu-controls {
+        //
+        // shared button coloring & behaviors
+        //
+        button {
+            display: flex;
+            align-items: center;
+            color: $light-text;
             background: white;
-            padding-top: $indent;
-
-            .config-header {
-                position: static;
+            border: 1px solid $light-stroke;
+            font: $medium 13px/16px $lato;
+            letter-spacing: 0.01em;
+            border-radius: 4px;
+            padding: 7px;
+            height: 40px;
+
+            &:hover {
+                background: $hover-fill;
+                cursor: pointer;
+
+                &:not(.active) {
+                    color: $dark-text;
+                }
             }
-        }
-        .settings-menu-backdrop {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.2);
-            z-index: $zindex-controls-backdrop;
-        }
 
-        .labeled-switch {
-            label > svg {
-                display: none;
+            &.active,
+            &:active {
+                background: $active-fill;
+                border: 1px solid $active-fill;
             }
 
-            .labeled-switch-subtitle {
-                display: block;
+            &.active {
+                cursor: default;
+                color: $active-text;
             }
         }
-    }
 
-    .settings-menu-contents {
-        .settings-menu-controls {
-            //
-            // shared button coloring & behaviors
-            //
-            button {
-                display: flex;
-                align-items: center;
-                color: $light-text;
-                background: white;
-                border: 1px solid $light-stroke;
-                font: $medium 13px/16px $lato;
-                letter-spacing: 0.01em;
-                border-radius: 4px;
-                padding: 7px;
-                height: 40px;
-
-                &:hover {
-                    background: $hover-fill;
-                    cursor: pointer;
-
-                    &:not(.active) {
-                        color: $dark-text;
-                    }
-                }
-
-                &.active,
-                &:active {
-                    background: $active-fill;
-                    border: 1px solid $active-fill;
-                }
+        //
+        // chart-type label and close button
+        //
+        .config-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: white;
+            padding: 9px $indent 3px $indent;
+            position: sticky;
+            top: 0;
+            z-index: 1;
 
-                &.active {
-                    cursor: default;
-                    color: $active-text;
-                }
+            .config-title {
+                text-transform: uppercase;
+                letter-spacing: 0.1em;
+                color: $light-text;
+                font: $bold 12px/16px $lato;
             }
 
-            //
-            // chart-type label and close button
-            //
-            .config-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                background: white;
-                padding: 9px $indent 3px $indent;
-                position: sticky;
-                top: 0;
-                z-index: 1;
-
-                .config-title {
-                    text-transform: uppercase;
-                    letter-spacing: 0.1em;
-                    color: $light-text;
-                    font: $bold 12px/16px $lato;
-                }
-
-                button.close {
-                    position: relative;
-                    border-radius: 50%;
-                    height: 32px;
-                    width: 32px;
-                    text-align: center;
-                    justify-content: center;
-                    svg {
-                        height: 14px;
-                        width: 14px;
-                    }
+            button.close {
+                position: relative;
+                border-radius: 50%;
+                height: 32px;
+                width: 32px;
+                text-align: center;
+                justify-content: center;
+                svg {
+                    height: 14px;
+                    width: 14px;
                 }
             }
+        }
 
-            //
-            // each titled block of control widgets (with optional info-circle + tooltip)
-            //
-            section {
-                font: $medium 14px/1.2 $lato;
-                color: $light-text;
-                padding: 1em 0;
-                margin: 0 $indent;
+        //
+        // each titled block of control widgets (with optional info-circle + tooltip)
+        //
+        section {
+            font: $medium 14px/1.2 $lato;
+            color: $light-text;
+            padding: 1em 0;
+            margin: 0 $indent;
+
+            .config-name {
+                font: $bold 14px/1.2 $lato;
+                color: $dark-text;
+                list-style: none;
+
+                svg {
+                    color: $info-icon;
+                    height: 13px;
+                    padding: 0 0.333em;
+                }
 
-                .config-name {
-                    font: $bold 14px/1.2 $lato;
+                // the tooltip triggered by hovering the circle-i
+                @at-root .tippy-box[data-theme="settings"] {
+                    background: white;
                     color: $dark-text;
-                    list-style: none;
+                    font: 400 14px/1.5 $sans-serif-font-stack;
+                    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
 
-                    svg {
-                        color: $info-icon;
-                        height: 13px;
-                        padding: 0 0.333em;
+                    .tippy-content {
+                        padding: $indent;
                     }
-
-                    // the tooltip triggered by hovering the circle-i
-                    @at-root .tippy-box[data-theme="settings"] {
-                        background: white;
-                        color: $dark-text;
-                        font: 400 14px/1.5 $sans-serif-font-stack;
-                        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
-
-                        .tippy-content {
-                            padding: $indent;
-                        }
-                        .tippy-arrow {
-                            color: white;
-                        }
+                    .tippy-arrow {
+                        color: white;
                     }
                 }
+            }
 
-                .labeled-switch .labeled-switch-subtitle,
-                .config-subtitle {
-                    font-size: 13px;
-                    margin: 5px 0;
-                }
+            .labeled-switch .labeled-switch-subtitle,
+            .config-subtitle {
+                font-size: 13px;
+                margin: 5px 0;
+            }
 
-                .config-toggle {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
-                    padding: 0.5em 0;
-                }
+            .config-toggle {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                padding: 0.5em 0;
+            }
 
-                & + section {
-                    border-top: 1px solid $light-stroke;
-                }
+            & + section {
+                border-top: 1px solid $light-stroke;
             }
+        }
 
-            //
-            // resuable widgets
-            //
-            section {
-                // left/right pairs of options
-                .config-toggle {
-                    label {
-                        flex-basis: 100%;
-                        color: $dark-text;
-                        margin-bottom: 0.5em;
-                    }
-                    button {
-                        width: calc(50% - 5px);
-                        padding: 7px 16px;
-                    }
+        //
+        // resuable widgets
+        //
+        section {
+            // left/right pairs of options
+            .config-toggle {
+                label {
+                    flex-basis: 100%;
+                    color: $dark-text;
+                    margin-bottom: 0.5em;
                 }
-
-                // on/off switch with label written to the right
-                .labeled-switch {
-                    margin: 14px 0;
-                    display: block;
+                button {
+                    width: calc(50% - 5px);
+                    padding: 7px 16px;
                 }
+            }
 
-                // vertical list of options (for selecting faceting mode)
-                .config-list {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 8px;
-                    padding: 7px 0;
-                    button {
-                        width: 100%;
+            // on/off switch with label written to the right
+            .labeled-switch {
+                margin: 14px 0;
+                display: block;
+            }
 
-                        .faceting-icon {
-                            display: flex;
-                            flex-wrap: wrap;
-                            width: 34px;
-                            height: 24px;
-                            justify-content: space-between;
-                            margin-right: 8px;
-                            span {
-                                // the round-rects that make up the grid
-                                display: inline-block;
-                                width: 100%;
-                                height: 100%;
-                                border-radius: 2px;
-                                background: $light-stroke;
-                            }
+            // vertical list of options (for selecting faceting mode)
+            .config-list {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                padding: 7px 0;
+                button {
+                    width: 100%;
+
+                    .faceting-icon {
+                        display: flex;
+                        flex-wrap: wrap;
+                        width: 34px;
+                        height: 24px;
+                        justify-content: space-between;
+                        margin-right: 8px;
+                        span {
+                            // the round-rects that make up the grid
+                            display: inline-block;
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 2px;
+                            background: $light-stroke;
                         }
+                    }
 
-                        &.entity span {
-                            width: 10px;
-                            height: 10px;
-                        }
+                    &.entity span {
+                        width: 10px;
+                        height: 10px;
+                    }
 
-                        &.metric span {
-                            width: 10px;
-                            height: 10px;
-                            border-radius: 5px;
-                        }
+                    &.metric span {
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 5px;
+                    }
 
-                        &.active span {
-                            background: #a4b6ca;
-                        }
+                    &.active span {
+                        background: #a4b6ca;
+                    }
 
-                        &:hover:not(.active) span {
-                            background: $light-fill;
-                        }
+                    &:hover:not(.active) span {
+                        background: $light-fill;
+                    }
 
-                        &:active:not(.active) span {
-                            background: $light-text;
-                        }
+                    &:active:not(.active) span {
+                        background: $light-text;
                     }
                 }
             }
         }
     }
 }
-
-@keyframes settings-menu-backdrop-enter {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes settings-menu-backdrop-exit {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes settings-menu-controls-enter {
-    0% {
-        transform: translate(301px, 0);
-    }
-    100% {
-        transform: translate(0, 0);
-    }
-}
-
-@keyframes settings-menu-controls-exit {
-    0% {
-        transform: translate(0, 0);
-    }
-    100% {
-        transform: translate(301px, 0);
-    }
-}
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
index 6c519e0fdef..1040d4b3807 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -1,5 +1,4 @@
 import React from "react"
-import { createPortal } from "react-dom"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
@@ -10,7 +9,6 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { ChartDimension } from "../chart/ChartDimension"
 import { makeSelectionArray } from "../chart/ChartUtils.js"
 import { AxisConfig } from "../axis/AxisConfig"
-import { GRAPHER_SETTINGS_DRAWER_ID } from "../core/GrapherConstants"
 
 import { AxisScaleToggle } from "./settings/AxisScaleToggle"
 import { AbsRelToggle, AbsRelToggleManager } from "./settings/AbsRelToggle"
@@ -48,10 +46,6 @@ export interface SettingsMenuManager
         ZoomToggleManager,
         TableFilterToggleManager,
         FacetStrategySelectionManager {
-    showConfigurationDrawer?: boolean
-    isInIFrame?: boolean
-    isEmbeddedInAnOwidPage?: boolean
-
     // ArchieML directives
     hideFacetControl?: boolean
     hideRelativeToggle?: boolean
@@ -91,8 +85,7 @@ export class SettingsMenu extends React.Component<{
     top: number
     bottom: number
 }> {
-    @observable.ref active: boolean = false // set to true when the menu's display has been requested
-    @observable.ref visible: boolean = false // true while menu is active and during enter/exit transitions
+    @observable.ref active: boolean = false
     contentRef: React.RefObject<HTMLDivElement> = React.createRef() // the menu contents & backdrop
 
     static shouldShow(manager: SettingsMenuManager): boolean {
@@ -245,15 +238,8 @@ export class SettingsMenu extends React.Component<{
             this.toggleVisibility()
     }
 
-    @action.bound toggleVisibility(e?: React.MouseEvent): void {
+    @action.bound toggleVisibility(): void {
         this.active = !this.active
-        if (this.active) this.visible = true
-        this.drawer?.classList.toggle("active", this.active)
-        e?.stopPropagation()
-    }
-
-    @action.bound onAnimationEnd(): void {
-        if (!this.active) this.visible = false
     }
 
     @computed get manager(): SettingsMenuManager {
@@ -269,38 +255,15 @@ export class SettingsMenu extends React.Component<{
         return makeSelectionArray(this.manager.selection)
     }
 
-    @computed get drawer(): Element | null {
-        const { isInIFrame, isEmbeddedInAnOwidPage } = this.manager
-        // Use the drawer `<nav>` element if it exists in the page markup (as it does on grapher and data pages)
-        // unless this is an external embed or an internal one (e.g., in the data page's Related Charts block).
-        // Otherwise, render into a drop-down menu.
-        return isInIFrame || isEmbeddedInAnOwidPage
-            ? null
-            : document.querySelector(`nav#${GRAPHER_SETTINGS_DRAWER_ID}`)
-    }
-
-    @computed get layout(): { maxHeight: string; top: number } | void {
-        // constrain height only in the pop-up case (drawers are full-height)
-        if (!this.drawer) {
-            const { top, bottom } = this.props,
-                maxHeight = `calc(100% - ${top + bottom}px)`
-            return { maxHeight, top }
-        }
-    }
-
-    private animationFor(selector: string): { animation: string } {
-        const phase = this.active ? "enter" : "exit",
-            timing = this.drawer ? "333ms" : "0"
-        return { animation: `${selector}-${phase} ${timing}` }
+    @computed get layout(): { maxHeight: string; top: number } {
+        const { top, bottom } = this.props,
+            maxHeight = `calc(100% - ${top + bottom}px)`
+        return { maxHeight, top }
     }
 
     @computed get menu(): JSX.Element | void {
-        const { visible, drawer } = this
-
-        if (visible) {
-            return !drawer
-                ? this.menuContents
-                : createPortal(this.menuContents, drawer)
+        if (this.active) {
+            return this.menuContents
         }
     }
 
@@ -342,13 +305,10 @@ export class SettingsMenu extends React.Component<{
                 <div
                     className="settings-menu-backdrop"
                     onClick={this.toggleVisibility}
-                    style={this.animationFor("settings-menu-backdrop")}
-                    onAnimationEnd={this.onAnimationEnd} // triggers unmount
                 ></div>
                 <div
                     className="settings-menu-controls"
                     style={{
-                        ...this.animationFor("settings-menu-controls"),
                         ...this.layout,
                     }}
                 >
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 537c3694b1d..03eafe45fa1 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -4,7 +4,6 @@ export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src"
 export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"
 
 export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
-export const GRAPHER_SETTINGS_DRAWER_ID = "grapher-settings-drawer"
 
 export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
 
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 2c4a0c74c71..ff2c13bbf12 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -32,7 +32,7 @@ $zindex-modal: 30;
 
 $zindex-full-screen: 120;
 $zindex-controls-backdrop: 130;
-$zindex-controls-drawer: 140;
+$zindex-controls-popup: 140;
 
 // needed for .global-entity-control-container
 @mixin xxlg-down {
diff --git a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
index fc67117b937..f6ab10ba05d 100644
--- a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
+++ b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { BodyDiv } from "../bodyDiv/BodyDiv"
-import { GRAPHER_SETTINGS_DRAWER_ID } from "../core/GrapherConstants"
 
 @observer
 export class FullScreen extends React.Component<{
@@ -13,15 +12,10 @@ export class FullScreen extends React.Component<{
     content: React.RefObject<HTMLDivElement> = React.createRef()
 
     @action.bound onDocumentClick(e: React.MouseEvent): void {
-        const settingsDrawer = document.getElementById(
-            GRAPHER_SETTINGS_DRAWER_ID
-        )
         if (
             this.content?.current &&
             // check if the click was outside of the modal
             !this.content.current.contains(e.target as Node) &&
-            // check if the click was outside of the settings drawer
-            (!settingsDrawer || !settingsDrawer.contains(e.target as Node)) &&
             // check that the target is still mounted to the document; we also get click events on nodes that have since been removed by React
             document.contains(e.target as Node)
         )
diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
index b71310f008d..9f43fd43499 100644
--- a/packages/@ourworldindata/grapher/src/index.ts
+++ b/packages/@ourworldindata/grapher/src/index.ts
@@ -11,7 +11,6 @@ export {
     GRAPHER_EMBEDDED_FIGURE_ATTR,
     GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR,
     GRAPHER_PAGE_BODY_CLASS,
-    GRAPHER_SETTINGS_DRAWER_ID,
     GRAPHER_IS_IN_IFRAME_CLASS,
     DEFAULT_GRAPHER_WIDTH,
     DEFAULT_GRAPHER_HEIGHT,
diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
index 167639b1a72..c32e8050656 100644
--- a/site/DataPageV2.tsx
+++ b/site/DataPageV2.tsx
@@ -1,7 +1,6 @@
 import {
     getVariableDataRoute,
     getVariableMetadataRoute,
-    GRAPHER_SETTINGS_DRAWER_ID,
     GrapherProgrammaticInterface,
 } from "@ourworldindata/grapher"
 import {
@@ -143,7 +142,6 @@ export const DataPageV2 = (props: {
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
                     <>
-                        <nav id={GRAPHER_SETTINGS_DRAWER_ID}></nav>
                         <script
                             dangerouslySetInnerHTML={{
                                 __html: `window._OWID_DATAPAGEV2_PROPS = ${JSON.stringify(
diff --git a/site/ExplorerPage.tsx b/site/ExplorerPage.tsx
index 44a26838aa9..2551cf88da2 100644
--- a/site/ExplorerPage.tsx
+++ b/site/ExplorerPage.tsx
@@ -1,6 +1,5 @@
 import {
     GRAPHER_PAGE_BODY_CLASS,
-    GRAPHER_SETTINGS_DRAWER_ID,
     LoadingIndicator,
 } from "@ourworldindata/grapher"
 import {
@@ -114,7 +113,6 @@ window.Explorer.renderSingleExplorerOnExplorerPage(explorerProgram, grapherConfi
                     hideAlertBanner={hideAlertBanner || false}
                 />
                 {subNav}
-                <nav id={GRAPHER_SETTINGS_DRAWER_ID}></nav>
                 <main id={ExplorerContainerId}>
                     <LoadingIndicator />
                 </main>
diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
index c30be348970..2aac7e0d1de 100644
--- a/site/GrapherPage.tsx
+++ b/site/GrapherPage.tsx
@@ -2,7 +2,6 @@ import {
     getVariableDataRoute,
     getVariableMetadataRoute,
     GRAPHER_PAGE_BODY_CLASS,
-    GRAPHER_SETTINGS_DRAWER_ID,
     LoadingIndicator,
 } from "@ourworldindata/grapher"
 import {
@@ -120,7 +119,6 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
             <body className={GRAPHER_PAGE_BODY_CLASS}>
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
-                    <nav id={GRAPHER_SETTINGS_DRAWER_ID}></nav>
                     <figure data-grapher-src={`/grapher/${grapher.slug}`}>
                         <LoadingIndicator />
                     </figure>