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

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()

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>

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'
         )}