diff --git a/src/app/App.test.tsx b/src/app/App.test.tsx
index a4123493d..d86e7b32f 100644
--- a/src/app/App.test.tsx
+++ b/src/app/App.test.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2023 The Pybricks Authors
+// Copyright (c) 2021-2026 The Pybricks Authors
 
 import { cleanup } from '@testing-library/react';
 import React from 'react';
@@ -42,15 +42,7 @@ it.each([false, true])('should render', (darkMode) => {
 });
 
 describe('documentation pane', () => {
-    it('should show by default on large screens', () => {
-        jest.spyOn(window, 'innerWidth', 'get').mockReturnValue(1024);
-        testRender(<App />);
-        expect(document.querySelector('.pb-show-docs')).not.toBeNull();
-        expect(document.querySelector('.pb-hide-docs')).toBeNull();
-    });
-
-    it('should hide by default on small screens', () => {
-        jest.spyOn(window, 'innerWidth', 'get').mockReturnValue(800);
+    it('should hide by default', () => {
         testRender(<App />);
         expect(document.querySelector('.pb-show-docs')).toBeNull();
         expect(document.querySelector('.pb-hide-docs')).not.toBeNull();
diff --git a/src/app/App.tsx b/src/app/App.tsx
index ccf420f51..fbe67409c 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,23 +1,24 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2026 The Pybricks Authors
 
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
-import { Classes, Spinner } from '@blueprintjs/core';
+import { Button, Classes, Spinner } from '@blueprintjs/core';
+import { Manual } from '@blueprintjs/icons';
 import React, { useEffect, useState } from 'react';
+
+type SideView = 'off' | 'docs';
 import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import Activities from '../activities/Activities';
 import DfuWindowsDriverInstallDialog from '../firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog';
 import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
 import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
-import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import SponsorDialog from '../sponsor/SponsorDialog';
 import StatusBar from '../status-bar/StatusBar';
 import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
-import { isMacOS } from '../utils/os';
-import { useAppLastDocsPageSetting } from './hooks';
+import { docsDefaultPage } from './constants';
 import { useI18n } from './i18n';
 
 const Editor = React.lazy(async () => {
@@ -47,22 +48,9 @@ const Terminal = React.lazy(async () => {
 });
 
 const Docs: React.FunctionComponent = () => {
-    const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
-    const { initialDocsPage, setLastDocsPage } = useAppLastDocsPageSetting();
-
     return (
         <iframe
-            // REVISIT: some of this could be moved to the docs repo
-            // so that it runs earlier to prevent flashing in the UI.
-            // The load event doesn't run until after the page is fully
-            // loaded and there doesn't seem to be a reasonable way to
-            // hook into the iframe to know when it has a new document.
             onLoad={(e) => {
-                // HACK: this mess restores the scroll position when
-                // the documentation iframe visibility is toggled.
-                // The iframe will be automatically scrolled to 0 when
-                // CSS `display: none` is set.
-
                 const target = e.target as HTMLIFrameElement;
                 const contentWindow = target.contentWindow;
                 if (!contentWindow) {
@@ -70,82 +58,11 @@ const Docs: React.FunctionComponent = () => {
                     return;
                 }
 
-                // the last "good" scrollY value of the iframe
-                let iframeScroll = 0;
-
-                // This bit monitors the visibility.
-                // https://stackoverflow.com/a/44670818/1976323
-                const observer = new IntersectionObserver(
-                    (entries) => {
-                        entries.forEach((entry) => {
-                            // Restore the scroll position when the iframe is
-                            // shown. Toggling the visibility prevents flashing
-                            // the contents from the top of the page before the
-                            // scroll is done.
-                            if (entry.intersectionRatio > 0) {
-                                contentWindow.scrollTo(0, iframeScroll);
-                                contentWindow.document.documentElement.style.visibility =
-                                    'visible';
-                            } else {
-                                contentWindow.document.documentElement.style.visibility =
-                                    'hidden';
-                            }
-                        });
-                    },
-                    {
-                        root: target.parentElement,
-                    },
-                );
-
-                observer.observe(target);
-
-                // Have to remove he observer, otherwise we end up with
-                // conflicting values when a new page is loaded in the iframe.
-                contentWindow.addEventListener('unload', () => {
-                    observer.unobserve(target);
-                });
-
-                // And this keeps track of the scroll position.
-                contentWindow.addEventListener('scroll', () => {
-                    if (contentWindow.scrollY !== 0) {
-                        // Record the current scroll position. If it is 0, it
-                        // could be that the iframe has been hidden or the user
-                        // scrolled there. So we have to ignore 0. But we don't
-                        // want to be one pixel off if the user really did
-                        // scroll there, so we assume that if the last scroll
-                        // is 1, then the user probably went all the way to 0.
-                        if (contentWindow.scrollY === 1) {
-                            iframeScroll = 0;
-                        } else {
-                            iframeScroll = contentWindow.scrollY;
-                        }
-                    }
-                });
-
-                // Override browser default key bindings in iframe.
-                contentWindow.document.addEventListener('keydown', (e) => {
-                    // use Ctrl-D/Cmd-D to toggle docs
-                    if (
-                        (isMacOS()
-                            ? e.metaKey && !e.ctrlKey
-                            : e.ctrlKey && !e.metaKey) &&
-                        !e.altKey &&
-                        e.key === 'd'
-                    ) {
-                        e.preventDefault();
-                        // since the iframe is only visible when docs are shown
-                        // the only action is to hide the docs
-                        setIsSettingShowDocsEnabled(false);
-                    }
-                });
-
                 if (document.body.classList.contains(Classes.DARK)) {
                     contentWindow.document.documentElement.classList.add(Classes.DARK);
                 }
-
-                setLastDocsPage(contentWindow.location.href);
             }}
-            src={initialDocsPage}
+            src={docsDefaultPage}
             allowFullScreen={true}
             width="100%"
             height="100%"
@@ -156,7 +73,7 @@ const Docs: React.FunctionComponent = () => {
 const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
-    const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
+    const [sideView, setSideView] = useState<SideView>('off');
     const [isDragging, setIsDragging] = useState(false);
 
     const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
@@ -201,7 +118,7 @@ const App: React.FunctionComponent = () => {
                 <div className="pb-app-main" style={{ position: 'relative' }}>
                     <SplitterLayout
                         customClassName={
-                            isSettingShowDocsEnabled ? 'pb-show-docs' : 'pb-hide-docs'
+                            sideView === 'docs' ? 'pb-show-docs' : 'pb-hide-docs'
                         }
                         onDragStart={(): void => setIsDragging(true)}
                         onDragEnd={(): void => setIsDragging(false)}
@@ -225,6 +142,22 @@ const App: React.FunctionComponent = () => {
                                 >
                                     <Editor />
                                 </React.Suspense>
+                                <Button
+                                    className="pb-app-doc-button"
+                                    minimal
+                                    large
+                                    icon={<Manual />}
+                                    title={
+                                        sideView === 'docs'
+                                            ? i18n.translate('docs.hide')
+                                            : i18n.translate('docs.show')
+                                    }
+                                    onClick={() =>
+                                        setSideView(
+                                            sideView === 'docs' ? 'off' : 'docs',
+                                        )
+                                    }
+                                />
                             </main>
                             <aside
                                 className="pb-app-terminal"
diff --git a/src/app/app.scss b/src/app/app.scss
index 41689dc47..97c7318fa 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2026 The Pybricks Authors
 
 // Custom styling for the App control.
 
@@ -71,6 +71,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
 
     & .pb-editor {
         min-height: 0;
@@ -78,6 +79,13 @@
     }
 }
 
+.pb-app-doc-button {
+    position: absolute;
+    bottom: bp.$pt-grid-size;
+    right: bp.$pt-grid-size;
+    z-index: bp.$pt-z-index-overlay;
+}
+
 $splitter-background-color: bp.$light-gray2;
 $splitter-background-color-hover: bp.$gray4;
 $dark-splitter-background-color: bp.$dark-gray5;
@@ -184,7 +192,14 @@ $dark-splitter-color-hover: color.adjust(
 }
 
 // hide the docs and resize separator
-
+// Use visibility rather than display:none so the iframe keeps its layout and
+// scroll position when the docs panel is toggled.
+// Collapse the secondary pane and splitter to zero width so they don't
+// consume space, while keeping the iframe in the DOM.
 div.pb-hide-docs > :not(.layout-pane-primary) {
-    display: none;
+    visibility: hidden;
+    pointer-events: none;
+    flex-basis: 0 !important;
+    width: 0 !important;
+    min-width: 0 !important;
 }
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
deleted file mode 100644
index faddd2da4..000000000
--- a/src/app/hooks.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { useEffect, useMemo } from 'react';
-import { useLocalStorage, useSessionStorage } from 'usehooks-ts';
-import { docsDefaultPage, docsPathPrefix, httpServerHeadersVersion } from './constants';
-
-const defaultPage = `${docsDefaultPage}?v$${httpServerHeadersVersion}`;
-
-export function useAppLastDocsPageSetting() {
-    const key = 'app.setting.lastDocsPage';
-
-    // last visited page is stored in local storage so that new windows get the
-    // last visited page
-    const [lastPageGlobalSetting, setLastPageGlobalSetting] = useLocalStorage(
-        key,
-        defaultPage,
-    );
-
-    // it is also stored in session storage in case two windows are open at the
-    // same time so that one window doesn't affect the other
-    const [lastPageSessionSetting, setLastPageSessionSetting] = useSessionStorage(
-        key,
-        lastPageGlobalSetting,
-    );
-
-    // mirror session storage value to local storage
-    useEffect(() => {
-        setLastPageGlobalSetting(lastPageSessionSetting);
-    }, [lastPageSessionSetting, setLastPageGlobalSetting]);
-
-    // the way the docs control works, we only provide the initial page, then
-    // it manages navigation after that, so we only want the initial of this
-    // value when the app first starts
-    const initialDocsPage = useMemo(
-        () => {
-            try {
-                const url = new URL(lastPageSessionSetting);
-
-                // in case someone is hacking the storage value directly
-                if (!url.pathname.startsWith(`/${docsPathPrefix}`)) {
-                    throw new Error('invalid or outdated path');
-                }
-
-                return lastPageSessionSetting;
-            } catch {
-                return defaultPage;
-            }
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [], // no deps so that we only get the initial value
-    );
-
-    return { initialDocsPage, setLastDocsPage: setLastPageSessionSetting };
-}
diff --git a/src/app/translations/en.json b/src/app/translations/en.json
index b7a1925b9..e5f384f17 100644
--- a/src/app/translations/en.json
+++ b/src/app/translations/en.json
@@ -4,5 +4,9 @@
         "editor": "Editor",
         "terminal": "Terminal",
         "documentation": "Documentation"
+    },
+    "docs": {
+        "show": "Show documentation",
+        "hide": "Hide documentation"
     }
 }
diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index 3f6a438ad..9f622ccb3 100644
--- a/src/editor/Editor.tsx
+++ b/src/editor/Editor.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2026 The Pybricks Authors
 
 import './editor.scss';
 import {
@@ -16,15 +16,7 @@ import {
     Tabs,
     Text,
 } from '@blueprintjs/core';
-import {
-    Blank,
-    Clipboard,
-    Cross,
-    Duplicate,
-    Manual,
-    Redo,
-    Undo,
-} from '@blueprintjs/icons';
+import { Blank, Clipboard, Cross, Duplicate, Redo, Undo } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import * as monaco from 'monaco-editor';
 import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json';
@@ -37,7 +29,6 @@ import { UUID } from '../fileStorage';
 import { useFileStoragePath } from '../fileStorage/hooks';
 import { compile } from '../mpy/actions';
 import { useSelector } from '../reducers';
-import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import { isMacOS } from '../utils/os';
 import Welcome from './Welcome';
 import { editorActivateFile, editorCloseFile } from './actions';
@@ -387,8 +378,6 @@ const Editor: React.FunctionComponent = () => {
     const dispatch = useDispatch();
 
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
-    const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
-        useSettingIsShowDocsEnabled();
     const { isDarkMode } = useTernaryDarkMode();
 
     const i18n = useI18n();
@@ -409,17 +398,6 @@ const Editor: React.FunctionComponent = () => {
         [i18n],
     );
 
-    useEditorAction(
-        editor,
-        () => ({
-            id: 'pybricks.action.toggleDocs',
-            label: i18n.translate('toggleDocs'),
-            run: () => toggleIsSettingShowDocsEnabled(),
-            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD],
-        }),
-        [i18n, toggleIsSettingShowDocsEnabled],
-    );
-
     useEditorAction(
         editor,
         () => ({
@@ -521,18 +499,6 @@ const Editor: React.FunctionComponent = () => {
                     <div className="pb-editor-monaco" ref={editorRef} />
                 </ContextMenu>
             </ResizeSensor>
-            <Button
-                className="pb-editor-doc-button"
-                minimal
-                large
-                icon={<Manual />}
-                title={
-                    isSettingShowDocsEnabled
-                        ? i18n.translate('docs.hide')
-                        : i18n.translate('docs.show')
-                }
-                onClick={toggleIsSettingShowDocsEnabled}
-            />
         </div>
     );
 };
diff --git a/src/editor/editor.scss b/src/editor/editor.scss
index 9142f662f..aa12a1ee7 100644
--- a/src/editor/editor.scss
+++ b/src/editor/editor.scss
@@ -93,13 +93,6 @@
             color: bp.$pt-dark-text-color-muted;
         }
     }
-
-    &-doc-button {
-        position: absolute;
-        bottom: bp.$pt-grid-size;
-        right: bp.$pt-grid-size;
-        z-index: bp.$pt-z-index-overlay;
-    }
 }
 
 .monaco-editor {
diff --git a/src/editor/translations/en.json b/src/editor/translations/en.json
index 28d4fa967..795943c35 100644
--- a/src/editor/translations/en.json
+++ b/src/editor/translations/en.json
@@ -5,16 +5,11 @@
     "welcome": "Welcome",
     "placeholder": "Write your program here...",
     "check": "Check syntax",
-    "toggleDocs": "Toggle documentation",
     "copy": "Copy",
     "paste": "Paste",
     "selectAll": "Select all",
     "undo": "Undo",
     "redo": "Redo",
     "closeFile": { "tooltip": "Close {fileName}" },
-    "contextMenu": { "label": "Editor context menu" },
-    "docs": {
-        "show": "Show documentation",
-        "hide": "Hide documentation"
-    }
+    "contextMenu": { "label": "Editor context menu" }
 }
diff --git a/src/settings/hooks.ts b/src/settings/hooks.ts
deleted file mode 100644
index 4c518c9a4..000000000
--- a/src/settings/hooks.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { useCallback, useEffect } from 'react';
-import { useEffectOnce, useLocalStorage, useSessionStorage } from 'usehooks-ts';
-
-/** Hook for "showDocs" setting. */
-export function useSettingIsShowDocsEnabled(): {
-    isSettingShowDocsEnabled: boolean;
-    setIsSettingShowDocsEnabled: (value: boolean) => void;
-    toggleIsSettingShowDocsEnabled: () => void;
-} {
-    const [isLastSettingShowDocsEnabled, setIsLastSettingShowDocsEnabled] =
-        useLocalStorage('setting.showDocs', window.innerWidth >= 1024);
-
-    const [isSettingShowDocsEnabled, setIsSettingShowDocsEnabled] = useSessionStorage(
-        'setting.showDocs',
-        isLastSettingShowDocsEnabled,
-    );
-
-    // Force writing to session storage since default value is not constant.
-    useEffectOnce(() => setIsSettingShowDocsEnabled(isSettingShowDocsEnabled));
-
-    useEffect(() => {
-        setIsLastSettingShowDocsEnabled(isSettingShowDocsEnabled);
-    }, [isSettingShowDocsEnabled, setIsLastSettingShowDocsEnabled]);
-
-    const toggleIsSettingShowDocsEnabled = useCallback(
-        () => setIsSettingShowDocsEnabled((x) => !x),
-        [setIsSettingShowDocsEnabled],
-    );
-
-    return {
-        isSettingShowDocsEnabled,
-        setIsSettingShowDocsEnabled,
-        toggleIsSettingShowDocsEnabled,
-    };
-}