fix(studio): wrap project actions (#43532)

## What kind of change does this PR introduce?

- UI fix

## What is the current behavior?

- The _New project_ button overflows to the right on smaller
(phone-sized) breakpoints
- Due to addition of _Sort by_ dropdown last week

## What is the new behavior?

- All actions now wrap on smaller breakpoint

| Before | After |
| --- | --- |
| <img width="393" height="852"
alt="Supabase-383C523F-0BF1-48CD-8052-F6D68301DA4E"
src="https://github.com/user-attachments/assets/3983a815-16ff-48cd-857f-b84b82bfc923"
/> | <img width="393" height="852"
alt="Supabase-ED7AD923-E837-4D48-B7D1-6DA3C6E45BFA"
src="https://github.com/user-attachments/assets/fe19f9cc-f832-4c5d-b412-0aa1a0c16d5b"
/> |

apps/studio/components/interfaces/HomePageActions.tsx

@@ -66,13 +66,13 @@ export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePag
   }, [sortStorage, isSuccessSortStorage, setSort, slug])
 
   return (
-    <div className="flex items-center justify-between w-full">
-      <div className="flex items-center gap-2">
+    <div className="flex flex-wrap items-center justify-between gap-2 w-full">
+      <div className="flex flex-col gap-2 min-w-0 flex-1 basis-full md:basis-auto sm:flex-row sm:flex-wrap sm:items-center">
         <Input
           placeholder="Search for a project"
           icon={<Search />}
           size="tiny"
-          className="w-32 md:w-64"
+          className="w-full sm:w-32 md:w-64"
           value={search}
           onChange={(event) => setSearch(event.target.value)}
           actions={[
@@ -89,32 +89,34 @@ export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePag
           ]}
         />
 
-        <FilterPopover
-          name="Status"
-          title="Filter projects by status"
-          options={[
-            { key: PROJECT_STATUS.ACTIVE_HEALTHY, label: 'Active' },
-            { key: PROJECT_STATUS.INACTIVE, label: 'Paused' },
-          ]}
-          activeOptions={filterStatus}
-          valueKey="key"
-          labelKey="label"
-          onSaveFilters={(options) => setFilterStatusStorage(options)}
-        />
+        <div className="flex items-center gap-2">
+          <FilterPopover
+            name="Status"
+            title="Filter projects by status"
+            options={[
+              { key: PROJECT_STATUS.ACTIVE_HEALTHY, label: 'Active' },
+              { key: PROJECT_STATUS.INACTIVE, label: 'Paused' },
+            ]}
+            activeOptions={filterStatus}
+            valueKey="key"
+            labelKey="label"
+            onSaveFilters={(options) => setFilterStatusStorage(options)}
+          />
 
-        <SortDropdown
-          options={[
-            { label: 'name', value: 'name' },
-            { label: 'creation date', value: 'created' },
-          ]}
-          value={sort}
-          setValue={(val) => setSortStorage(val as ProjectListSort)}
-        />
+          <SortDropdown
+            options={[
+              { label: 'name', value: 'name' },
+              { label: 'creation date', value: 'created' },
+            ]}
+            value={sort}
+            setValue={(val) => setSortStorage(val as ProjectListSort)}
+          />
 
-        {isFetchingProjects && <Loader2 className="animate-spin" size={14} />}
+          {isFetchingProjects && <Loader2 className="animate-spin" size={14} />}
+        </div>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 flex-shrink-0">
         {viewMode && setViewMode && (
           <ToggleGroup
             type="single"