diff --git a/src/components/ClientResourcesTable.tsx b/src/components/ClientResourcesTable.tsx
index 9866e444f..f10f6414e 100644
--- a/src/components/ClientResourcesTable.tsx
+++ b/src/components/ClientResourcesTable.tsx
@@ -48,6 +48,7 @@ import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { useDebouncedCallback } from "use-debounce";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import {
     ResourceSitesStatusCell,
     type ResourceSiteRow
@@ -336,7 +337,7 @@ export default function ClientResourcesTable({
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent
-                        className="w-[min(20rem,var(--radix-popover-trigger-width))] p-0"
+                        className={dataTableFilterPopoverContentClassName}
                         align="start"
                     >
                         <div className="border-b p-1">
diff --git a/src/components/ColumnFilter.tsx b/src/components/ColumnFilter.tsx
index 3e7b585b8..5a944cd88 100644
--- a/src/components/ColumnFilter.tsx
+++ b/src/components/ColumnFilter.tsx
@@ -15,6 +15,7 @@ import {
 } from "@app/components/ui/command";
 import { CheckIcon, ChevronDownIcon, Filter } from "lucide-react";
 import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { Badge } from "./ui/badge";
 
 interface FilterOption {
@@ -74,7 +75,10 @@ export function ColumnFilter({
                     <ChevronDownIcon className="h-4 w-4 shrink-0 opacity-50" />
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="p-0 w-50" align="start">
+            <PopoverContent
+                className={dataTableFilterPopoverContentClassName}
+                align="start"
+            >
                 <Command>
                     <CommandInput placeholder={searchPlaceholder} />
                     <CommandList>
diff --git a/src/components/ColumnFilterButton.tsx b/src/components/ColumnFilterButton.tsx
index 7d17066cb..689f78983 100644
--- a/src/components/ColumnFilterButton.tsx
+++ b/src/components/ColumnFilterButton.tsx
@@ -15,6 +15,7 @@ import {
 } from "@app/components/ui/command";
 import { CheckIcon, ChevronDownIcon, Funnel } from "lucide-react";
 import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { Badge } from "./ui/badge";
 
 interface FilterOption {
@@ -75,7 +76,10 @@ export function ColumnFilterButton({
                     </div>
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="p-0 w-50" align="start">
+            <PopoverContent
+                className={dataTableFilterPopoverContentClassName}
+                align="start"
+            >
                 <Command>
                     <CommandInput placeholder={searchPlaceholder} />
                     <CommandList>
diff --git a/src/components/ColumnMultiFilterButton.tsx b/src/components/ColumnMultiFilterButton.tsx
index ee386461d..787a306b2 100644
--- a/src/components/ColumnMultiFilterButton.tsx
+++ b/src/components/ColumnMultiFilterButton.tsx
@@ -18,6 +18,7 @@ import {
 } from "@app/components/ui/command";
 import { CheckIcon, Funnel } from "lucide-react";
 import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { Badge } from "./ui/badge";
 
 type FilterOption = {
@@ -101,7 +102,10 @@ export function ColumnMultiFilterButton({
                     </div>
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="p-0 w-50" align="start">
+            <PopoverContent
+                className={dataTableFilterPopoverContentClassName}
+                align="start"
+            >
                 <Command>
                     <CommandInput placeholder={searchPlaceholder} />
                     <CommandList>
diff --git a/src/components/HealthChecksTable.tsx b/src/components/HealthChecksTable.tsx
index 404ade547..9545cbb7d 100644
--- a/src/components/HealthChecksTable.tsx
+++ b/src/components/HealthChecksTable.tsx
@@ -50,6 +50,7 @@ import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 
 type StandaloneHealthChecksTableProps = {
     orgId: string;
@@ -376,7 +377,7 @@ export default function HealthChecksTable({
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent
-                        className="w-[min(20rem,var(--radix-popover-trigger-width))] p-0"
+                        className={dataTableFilterPopoverContentClassName}
                         align="start"
                     >
                         <div className="border-b p-1">
@@ -445,7 +446,7 @@ export default function HealthChecksTable({
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent
-                        className="w-[min(20rem,var(--radix-popover-trigger-width))] p-0"
+                        className={dataTableFilterPopoverContentClassName}
                         align="start"
                     >
                         <div className="border-b p-1">
diff --git a/src/components/ProxyResourcesTable.tsx b/src/components/ProxyResourcesTable.tsx
index b5daa5850..efbd2db01 100644
--- a/src/components/ProxyResourcesTable.tsx
+++ b/src/components/ProxyResourcesTable.tsx
@@ -26,6 +26,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { Selectedsite, SitesSelector } from "@app/components/site-selector";
 import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
@@ -441,7 +442,7 @@ export default function ProxyResourcesTable({
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent
-                        className="w-[min(20rem,var(--radix-popover-trigger-width))] p-0"
+                        className={dataTableFilterPopoverContentClassName}
                         align="start"
                     >
                         <div className="border-b p-1">
diff --git a/src/components/ui/controlled-data-table.tsx b/src/components/ui/controlled-data-table.tsx
index 58081783a..1f7683adc 100644
--- a/src/components/ui/controlled-data-table.tsx
+++ b/src/components/ui/controlled-data-table.tsx
@@ -33,6 +33,7 @@ import {
 } from "@app/components/ui/dropdown-menu";
 import { Input } from "@app/components/ui/input";
 import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
+import { dataTableFilterDropdownContentClassName } from "@app/lib/dataTableFilterPopover";
 
 import {
     ChevronDown,
@@ -345,7 +346,9 @@ export function ControlledDataTable<TData, TValue>({
                                             </DropdownMenuTrigger>
                                             <DropdownMenuContent
                                                 align="start"
-                                                className="w-48"
+                                                className={
+                                                    dataTableFilterDropdownContentClassName
+                                                }
                                             >
                                                 <DropdownMenuLabel>
                                                     {filter.label}
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index 2b2861bb5..673388454 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -34,6 +34,7 @@ import { Button } from "@app/components/ui/button";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "@app/components/DataTablePagination";
+import { dataTableFilterDropdownContentClassName } from "@app/lib/dataTableFilterPopover";
 import { ChevronDown, Plus, Search, RefreshCw, Columns, Filter } from "lucide-react";
 import {
     Card,
@@ -603,7 +604,9 @@ export function DataTable<TData, TValue>({
                                             </DropdownMenuTrigger>
                                             <DropdownMenuContent
                                                 align="start"
-                                                className="w-48"
+                                                className={
+                                                    dataTableFilterDropdownContentClassName
+                                                }
                                             >
                                                 <DropdownMenuLabel>
                                                     {filter.label}
diff --git a/src/lib/dataTableFilterPopover.ts b/src/lib/dataTableFilterPopover.ts
new file mode 100644
index 000000000..606527209
--- /dev/null
+++ b/src/lib/dataTableFilterPopover.ts
@@ -0,0 +1,5 @@
+export const dataTableFilterPopoverContentClassName =
+    "w-[min(16rem,calc(100vw-2rem))] p-0";
+
+export const dataTableFilterDropdownContentClassName =
+    "w-[min(16rem,calc(100vw-2rem))]";