diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx
index 8cd44f8e9c90b7695777069d2640f1f22f572bcb..366d6e314fb2c8a3fe3935f1feb1b057284cede5 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx
@@ -3,12 +3,12 @@ import { useMemo } from "react";
 import { t } from "ttag";
 
 import { useBooleanOptionFilter } from "metabase/querying/filters/hooks/use-boolean-option-filter";
-import { Box, Button, Icon, Radio, Stack } from "metabase/ui";
+import { Button, Icon, Radio, Stack } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function BooleanFilterPicker({
@@ -52,9 +52,7 @@ export function BooleanFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
+    <FilterPickerForm
       data-testid="boolean-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -89,6 +87,6 @@ export function BooleanFilterPicker({
         )}
         <FilterPickerFooter isNew={isNew} canSubmit />
       </div>
-    </Box>
+    </FilterPickerForm>
   );
 }
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx
index ce44f49fcc17a8d800fa26ce6725cd7619da2138..fd0d7b1a300e93ba80ac764b57010e3b78e1ca69 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx
@@ -13,8 +13,8 @@ import * as Lib from "metabase-lib";
 import { NumberFilterValuePicker } from "../../FilterValuePicker";
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 import { CoordinateColumnPicker } from "./CoordinateColumnPicker";
@@ -72,10 +72,7 @@ export function CoordinateFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
+    <FilterPickerForm
       data-testid="coordinate-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -89,7 +86,7 @@ export function CoordinateFilterPicker({
           onChange={handleOperatorChange}
         />
       </FilterPickerHeader>
-      <Box>
+      <Flex direction="column" mih={0}>
         {canPickColumns && (
           <CoordinateColumnPicker
             query={query}
@@ -110,8 +107,8 @@ export function CoordinateFilterPicker({
           onChange={setValues}
         />
         <FilterPickerFooter isNew={isNew} canSubmit={isValid} />
-      </Box>
-    </Box>
+      </Flex>
+    </FilterPickerForm>
   );
 }
 
@@ -136,7 +133,7 @@ function CoordinateValueInput({
 }: CoordinateValueInputProps) {
   if (hasMultipleValues) {
     return (
-      <Box p="md" mah="25vh" style={{ overflow: "auto" }}>
+      <Box p="md" style={{ overflow: "auto" }}>
         <NumberFilterValuePicker
           query={query}
           stageIndex={stageIndex}
@@ -151,7 +148,7 @@ function CoordinateValueInput({
 
   if (valueCount === 1) {
     return (
-      <Flex p="md">
+      <Box p="md">
         <NumberInput
           value={values[0]}
           placeholder={t`Enter a number`}
@@ -160,7 +157,7 @@ function CoordinateValueInput({
           aria-label={t`Filter value`}
           onChange={(newValue: number) => onChange([newValue])}
         />
-      </Flex>
+      </Box>
     );
   }
 
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx
index cf156ef668fc96671a13d0a978143be0f62c8c76..a256e16c3186ee689d2e16afecfc134b909484af 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx
@@ -2,12 +2,12 @@ import type { FormEvent } from "react";
 import { useMemo } from "react";
 
 import { useDefaultFilter } from "metabase/querying/filters/hooks/use-default-filter";
-import { Box, Radio, Stack } from "metabase/ui";
+import { Radio, Stack } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function DefaultFilterPicker({
@@ -52,9 +52,7 @@ export function DefaultFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
+    <FilterPickerForm
       data-testid="default-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -78,6 +76,6 @@ export function DefaultFilterPicker({
         </Radio.Group>
         <FilterPickerFooter isNew={isNew} canSubmit />
       </div>
-    </Box>
+    </FilterPickerForm>
   );
 }
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3df2064ba9952d1ec7d7bd167a7b765740e0c3c0
--- /dev/null
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx
@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type Ref, forwardRef } from "react";
+
+import { Box } from "metabase/ui";
+
+import { MAX_WIDTH, MIN_WIDTH } from "../constants";
+
+export const FilterPickerForm = forwardRef(function FilterPickerForm(
+  props: HTMLAttributes<HTMLFormElement>,
+  ref: Ref<HTMLFormElement>,
+) {
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      component="form"
+      display="flex"
+      miw={MIN_WIDTH}
+      maw={MAX_WIDTH}
+      mih={0}
+      mah="inherit"
+      style={{ flexDirection: "column" }}
+    />
+  );
+});
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f564b2f7b4c9d052782a5d84e815e99f8709c060
--- /dev/null
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts
@@ -0,0 +1 @@
+export * from "./FilterPickerForm";
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx
index 56d0b2ba3a6d8d962450a58a4d6c40dd2e9a264c..5363dfacd8f864462c83a7159ca4f0bb4b4b2e42 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx
@@ -13,8 +13,8 @@ import * as Lib from "metabase-lib";
 import { NumberFilterValuePicker } from "../../FilterValuePicker";
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function NumberFilterPicker({
@@ -64,10 +64,7 @@ export function NumberFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
+    <FilterPickerForm
       data-testid="number-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -81,7 +78,7 @@ export function NumberFilterPicker({
           onChange={handleOperatorChange}
         />
       </FilterPickerHeader>
-      <div>
+      <Flex direction="column" mih={0}>
         <NumberValueInput
           query={query}
           stageIndex={stageIndex}
@@ -92,8 +89,8 @@ export function NumberFilterPicker({
           onChange={setValues}
         />
         <FilterPickerFooter isNew={isNew} canSubmit={isValid} />
-      </div>
-    </Box>
+      </Flex>
+    </FilterPickerForm>
   );
 }
 
@@ -118,7 +115,7 @@ function NumberValueInput({
 }: NumberValueInputProps) {
   if (hasMultipleValues) {
     return (
-      <Box p="md" mah="25vh" style={{ overflow: "auto" }}>
+      <Box p="md" style={{ overflow: "auto" }}>
         <NumberFilterValuePicker
           query={query}
           stageIndex={stageIndex}
@@ -133,7 +130,7 @@ function NumberValueInput({
 
   if (valueCount === 1) {
     return (
-      <Flex p="md">
+      <Box p="md">
         <NumberInput
           value={values[0]}
           placeholder={t`Enter a number`}
@@ -142,7 +139,7 @@ function NumberValueInput({
           aria-label={t`Filter value`}
           onChange={newValue => onChange([newValue])}
         />
-      </Flex>
+      </Box>
     );
   }
 
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx
index 72f1278df522f8c45f85c5421d04989fc0fd3299..1ce42fd6924b5a50338fbee14954cc7e939fed43 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx
@@ -12,8 +12,8 @@ import * as Lib from "metabase-lib";
 import { StringFilterValuePicker } from "../../FilterValuePicker";
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function StringFilterPicker({
@@ -64,10 +64,7 @@ export function StringFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
+    <FilterPickerForm
       data-testid="string-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -81,7 +78,7 @@ export function StringFilterPicker({
           onChange={handleOperatorChange}
         />
       </FilterPickerHeader>
-      <div>
+      <Flex direction="column" mih={0}>
         <StringValueInput
           query={query}
           stageIndex={stageIndex}
@@ -98,8 +95,8 @@ export function StringFilterPicker({
             />
           )}
         </FilterPickerFooter>
-      </div>
-    </Box>
+      </Flex>
+    </FilterPickerForm>
   );
 }
 
@@ -122,7 +119,7 @@ function StringValueInput({
 }: StringValueInputProps) {
   if (type === "exact") {
     return (
-      <Box p="md" mah="25vh" style={{ overflow: "auto" }}>
+      <Box p="md" style={{ overflow: "auto" }}>
         <StringFilterValuePicker
           query={query}
           stageIndex={stageIndex}
@@ -137,7 +134,7 @@ function StringValueInput({
 
   if (type === "partial") {
     return (
-      <Flex p="md">
+      <Box p="md">
         <MultiAutocomplete
           value={values}
           data={[]}
@@ -147,7 +144,7 @@ function StringValueInput({
           aria-label={t`Filter value`}
           onChange={onChange}
         />
-      </Flex>
+      </Box>
     );
   }
 
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx
index 4aabd3e30a273959584ce0ebf088a56e44c77d8d..2a4450a978c803974e9d4f1e5f490202bb73c5ca 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx
@@ -11,8 +11,8 @@ import * as Lib from "metabase-lib";
 
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function TimeFilterPicker({
@@ -60,13 +60,7 @@ export function TimeFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
-      data-testid="time-filter-picker"
-      onSubmit={handleSubmit}
-    >
+    <FilterPickerForm data-testid="time-filter-picker" onSubmit={handleSubmit}>
       <FilterPickerHeader
         columnName={columnInfo.longDisplayName}
         onBack={onBack}
@@ -89,7 +83,7 @@ export function TimeFilterPicker({
         )}
         <FilterPickerFooter isNew={isNew} canSubmit />
       </Box>
-    </Box>
+    </FilterPickerForm>
   );
 }