diff --git a/frontend/src/metabase/query_builder/components/view/View.jsx b/frontend/src/metabase/query_builder/components/view/View.jsx
index c8f579e0176fb78074c4836b0b5b91adbd0edc63..a307e37990f28b8e4155b020fc331c71d142455e 100644
--- a/frontend/src/metabase/query_builder/components/view/View.jsx
+++ b/frontend/src/metabase/query_builder/components/view/View.jsx
@@ -25,7 +25,7 @@ import { TagEditorSidebar } from "../template_tags/TagEditorSidebar";
 
 import NewQuestionHeader from "./NewQuestionHeader";
 import NewQuestionView from "./View/NewQuestionView";
-import QueryViewNotebook from "./View/QueryViewNotebook";
+import { NotebookContainer } from "./View/NotebookContainer";
 import {
   BorderedViewTitleHeader,
   NativeQueryEditorContainer,
@@ -384,8 +384,8 @@ class View extends Component {
           {isHeaderVisible && this.renderHeader()}
           <QueryBuilderContentContainer>
             {!isNative && (
-              <QueryViewNotebook
-                isNotebookContainerOpen={isNotebookContainerOpen}
+              <NotebookContainer
+                isOpen={isNotebookContainerOpen}
                 {...this.props}
               />
             )}
diff --git a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dbf4989727bf986b472b7e489923d47b43ee7ca3
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/NotebookContainer.tsx
@@ -0,0 +1,52 @@
+import type { TransitionEventHandler } from "react";
+import { useEffect, useState } from "react";
+
+import Notebook from "metabase/query_builder/components/notebook/Notebook";
+import { Box } from "metabase/ui";
+
+// There must exist some transition time, no matter how short,
+// because we need to trigger the 'onTransitionEnd' in the component
+const delayBeforeNotRenderingNotebook = 10;
+
+interface NotebookContainerProps {
+  isOpen: boolean;
+}
+
+export const NotebookContainer = ({
+  isOpen,
+  ...props
+}: NotebookContainerProps) => {
+  const [shouldShowNotebook, setShouldShowNotebook] = useState(isOpen);
+
+  useEffect(() => {
+    isOpen && setShouldShowNotebook(isOpen);
+  }, [isOpen]);
+
+  const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (
+    event,
+  ): void => {
+    if (event.propertyName === "opacity" && !isOpen) {
+      setShouldShowNotebook(false);
+    }
+  };
+
+  const transformStyle = isOpen ? "translateY(0)" : "translateY(-100%)";
+
+  return (
+    <Box
+      bg="white"
+      pos="absolute"
+      inset={0}
+      opacity={isOpen ? 1 : 0}
+      style={{
+        zIndex: 2,
+        overflowY: "auto",
+        transform: transformStyle,
+        transition: `transform ${delayBeforeNotRenderingNotebook}ms, opacity ${delayBeforeNotRenderingNotebook}ms`,
+      }}
+      onTransitionEnd={handleTransitionEnd}
+    >
+      {shouldShowNotebook && <Notebook {...props} />}
+    </Box>
+  );
+};
diff --git a/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..902bdd5dd7278288df866d8cc5fc27852b498dec
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/View/NotebookContainer/index.ts
@@ -0,0 +1 @@
+export { NotebookContainer } from "./NotebookContainer";
diff --git a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx b/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx
deleted file mode 100644
index 208b481656f0b8ca619e9ea4c06c0c5d2b168e24..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import PropTypes from "prop-types";
-import { useEffect, useState } from "react";
-
-import Notebook from "metabase/query_builder/components/notebook/Notebook";
-
-import { NotebookContainer } from "./QueryViewNotebook.styled";
-
-const delayBeforeNotRenderingNotebook = 10;
-
-const QueryViewNotebook = ({ isNotebookContainerOpen, ...props }) => {
-  const [shouldShowNotebook, setShouldShowNotebook] = useState(
-    isNotebookContainerOpen,
-  );
-
-  useEffect(() => {
-    isNotebookContainerOpen && setShouldShowNotebook(isNotebookContainerOpen);
-  }, [isNotebookContainerOpen]);
-
-  const handleTransitionEnd = event => {
-    if (event.propertyName === "opacity" && !isNotebookContainerOpen) {
-      setShouldShowNotebook(false);
-    }
-  };
-
-  return (
-    <NotebookContainer
-      isOpen={isNotebookContainerOpen}
-      transitionTime={delayBeforeNotRenderingNotebook}
-      onTransitionEnd={handleTransitionEnd}
-    >
-      {shouldShowNotebook && <Notebook {...props} />}
-    </NotebookContainer>
-  );
-};
-
-QueryViewNotebook.propTypes = {
-  isNotebookContainerOpen: PropTypes.bool.isRequired,
-};
-
-export default QueryViewNotebook;
diff --git a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx b/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx
deleted file mode 100644
index 557512fb69e6c8a64008d7e30599d9f2f93545a6..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/QueryViewNotebook.styled.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-import { color } from "metabase/lib/colors";
-
-export const NotebookContainer = styled.div<{
-  transitionTime?: number;
-  isOpen?: boolean;
-}>`
-  background: white;
-  border-top: 1px solid ${color("border")};
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  overflow-y: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform: translateY(-100%);
-  z-index: 2;
-
-  ${({ transitionTime }) =>
-    css`
-      transition: transform ${transitionTime}ms, opacity ${transitionTime}ms;
-    `}
-
-  ${({ isOpen }) =>
-    isOpen &&
-    css`
-      opacity: 1;
-      transform: translateY(0);
-    `}
-
-  @media (prefers-reduced-motion) {
-    // Must have some transition time, if tiny,
-    // so that it will trigger 'onTransitionEnd' in the component
-    transition: transform 10ms, opacity 10ms;
-  }
-`;
diff --git a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js b/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js
deleted file mode 100644
index a64be44a922463bc9934eccfbaa847b12e9dedd7..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/components/view/View/QueryViewNotebook/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./QueryViewNotebook";