From 818cbd36fd82166e08228dc3c094917f72adf7eb Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Tue, 10 Mar 2026 16:26:58 -0600
Subject: [PATCH] fix: new filter updates in table editor better mobile view
 (#43604)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Right now the new filter bar just does not work on mobile. It fully
collapses and does not appear correctly. This make it stack on smaller
screens and shows it to be visible. Works on smaller tabs

Note: there is a bit of awkwardness on certain screen sizes where its
one long row, will fix that later. This is better than nothing right now
---
 .../grid/components/header/HeaderNew.tsx      | 25 ++++++-------------
 .../header/filter/FilterPopoverNew.tsx        |  2 +-
 .../ui-patterns/src/FilterBar/FilterGroup.tsx |  2 +-
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/apps/studio/components/grid/components/header/HeaderNew.tsx b/apps/studio/components/grid/components/header/HeaderNew.tsx
index 9d03a76d271..c675bef87f5 100644
--- a/apps/studio/components/grid/components/header/HeaderNew.tsx
+++ b/apps/studio/components/grid/components/header/HeaderNew.tsx
@@ -65,15 +65,20 @@ export const HeaderNew = ({
 
   return (
     <div>
-      <div className="flex h-10 items-center justify-between bg-dash-sidebar dark:bg-surface-100 px-1.5 py-1.5 gap-2 overflow-x-auto ">
+      <div className="flex flex-wrap min-h-10 items-center bg-dash-sidebar dark:bg-surface-100 px-1.5 py-1.5 gap-2">
         {customHeader ? (
           customHeader
         ) : snap.selectedRows.size > 0 ? (
           <RowHeader tableQueriesEnabled={tableQueriesEnabled} />
         ) : (
-          <DefaultHeader tableQueriesEnabled={tableQueriesEnabled} isRefetching={isRefetching} />
+          <div className="flex-1 min-w-[300px] flex items-center gap-2">
+            <FilterPopoverNew isRefetching={isRefetching} />
+          </div>
         )}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 overflow-x-auto">
+          {!customHeader && snap.selectedRows.size === 0 && (
+            <SortPopover tableQueriesEnabled={tableQueriesEnabled} />
+          )}
           <GridHeaderActions table={snap.originalTable} isRefetching={isRefetching} />
           {showInsertButton && <InsertButton />}
         </div>
@@ -82,20 +87,6 @@ export const HeaderNew = ({
   )
 }
 
-const DefaultHeader = ({
-  tableQueriesEnabled = true,
-  isRefetching,
-}: Pick<HeaderProps, 'tableQueriesEnabled' | 'isRefetching'>) => {
-  return (
-    <>
-      <div className="flex-1 min-w-0 flex items-center gap-2">
-        <FilterPopoverNew isRefetching={isRefetching} />
-      </div>
-      <SortPopover tableQueriesEnabled={tableQueriesEnabled} />
-    </>
-  )
-}
-
 const InsertButton = () => {
   const { ref: projectRef } = useParams()
   const { data: org } = useSelectedOrganizationQuery()
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
index 9a731fc4edf..58f21498df6 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
@@ -207,7 +207,7 @@ export const FilterPopoverNew = ({ isRefetching = false }: FilterPopoverProps) =
         actions={actions}
         isLoading={isGenerating}
         variant="pill"
-        className="bg-transparent border-0"
+        className="bg-transparent border-0 overflow-visible"
         icon={icon}
       />
     </div>
diff --git a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
index 0e2c1258c6f..c7ed5178693 100644
--- a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
@@ -143,7 +143,7 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
     >
       <div
         className={cn(
-          'flex items-stretch',
+          'flex items-stretch flex-wrap',
           isRootGroup ? 'flex-1 min-w-0' : '',
           variant === 'pill' ? 'gap-1' : 'gap-0'
         )}