diff --git a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx
index 5fb7db827e8e6bebbc1c48a8b402e0e08ce060e5..98f42f8dacc7e68628bdbf0862686872e7a1baee 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx
@@ -46,8 +46,6 @@ import {
 import { SearchResults, getSearchItemTableOrCardId } from "./data-search";
 import SavedEntityPicker from "./saved-entity-picker/SavedEntityPicker";
 
-import "./DataSelector.module.css";
-
 const MIN_SEARCH_LENGTH = 2;
 
 // chooses a data source bucket (datasets / raw data (tables) / saved questions)
diff --git a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css b/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css
deleted file mode 100644
index 7f6e04eb45ab39aa415587255d4a1362a3f05999..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* HACK: DataPopover should be below the search box */
-:global(.DataPopoverContainer) {
-  z-index: 2;
-}
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionDataSelector.jsx b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/QuestionDataSelector.tsx
similarity index 57%
rename from frontend/src/metabase/query_builder/components/view/QuestionDataSelector.jsx
rename to frontend/src/metabase/query_builder/components/view/QuestionDataSelector/QuestionDataSelector.tsx
index 5f1293fb8a5a637435fc1d861df0c81fac4d7914..2bf4991e05cbe82d9d9d098d508714715fc832a7 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionDataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/QuestionDataSelector.tsx
@@ -1,13 +1,20 @@
-/* eslint-disable react/prop-types */
+import CS from "metabase/css/core/index.css";
+import type { updateQuestion as updateQuestionAction } from "metabase/query_builder/actions";
 import { DataSourceSelector } from "metabase/query_builder/components/DataSelector";
 import * as Lib from "metabase-lib";
+import type Question from "metabase-lib/v1/Question";
+import type { DatabaseId, TableId } from "metabase-types/api";
 
-export default function QuestionDataSelector({
+export const QuestionDataSelector = ({
   question,
   updateQuestion,
   triggerElement,
-}) {
-  const handleTableChange = (tableId, databaseId) => {
+}: {
+  question: Question;
+  updateQuestion: typeof updateQuestionAction;
+  triggerElement: JSX.Element;
+}) => {
+  const handleTableChange = (tableId: TableId, databaseId: DatabaseId) => {
     const metadata = question.metadata();
     const metadataProvider = Lib.metadataProvider(databaseId, metadata);
     const table = Lib.tableOrCardMetadata(metadataProvider, tableId);
@@ -17,7 +24,7 @@ export default function QuestionDataSelector({
 
   return (
     <DataSourceSelector
-      containerClassName="DataPopoverContainer"
+      containerClassName={CS.z2}
       hasTableSearch
       databaseQuery={{ saved: true }}
       setSourceTableFn={handleTableChange}
@@ -25,4 +32,4 @@ export default function QuestionDataSelector({
       isOpen
     />
   );
-}
+};
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..72954fbe4de1606ef8d95a8df546791e55074f46
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts
@@ -0,0 +1 @@
+export { QuestionDataSelector } from "./QuestionDataSelector";
diff --git a/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx b/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx
index 61a01883b39d48c7d520436f9f501dedf094a7e8..31f68f691bb58976a68c9bd7dd18052e6ee34310 100644
--- a/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx
+++ b/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx
@@ -4,10 +4,9 @@ import { t } from "ttag";
 import Subhead from "metabase/components/type/Subhead";
 import CS from "metabase/css/core/index.css";
 import type { updateQuestion } from "metabase/query_builder/actions";
+import { QuestionDataSelector } from "metabase/query_builder/components/view/QuestionDataSelector";
 import type Question from "metabase-lib/v1/Question";
 
-import QuestionDataSelector from "../../QuestionDataSelector";
-
 type Props = {
   question: Question;
   updateQuestion: typeof updateQuestion;