Add mobile compatibility for app search bar

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -216,6 +216,7 @@
       <div class="filter">
         <div class="select">
           <Select
+            autoWidth
             bind:value={sortBy}
             placeholder={null}
             options={[
@@ -224,8 +225,10 @@
               { label: "Sort by status", value: "status" },
             ]}
           />
+          <div class="desktop-search">
             <Search placeholder="Search" bind:value={searchTerm} />
           </div>
+        </div>
         <ActionGroup>
           <ActionButton
             on:click={() => (layout = "grid")}
@@ -241,6 +244,9 @@
           />
         </ActionGroup>
       </div>
+      <div class="mobile-search">
+        <Search placeholder="Search" bind:value={searchTerm} />
+      </div>
       <div
         class:appGrid={layout === "grid"}
         class:appTable={layout === "table"}
@@ -318,6 +324,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    gap: 10px;
   }
 
   .select {
@@ -325,6 +332,12 @@
     grid-template-columns: 1fr 1fr;
     grid-gap: 10px;
   }
+  .filter :global(.spectrum-ActionGroup) {
+    flex-wrap: nowrap;
+  }
+  .mobile-search {
+    display: none;
+  }
 
   .appGrid {
     display: grid;
@@ -364,5 +377,11 @@
     .appTable {
       grid-template-columns: 1fr auto;
     }
+    .desktop-search {
+      display: none;
+    }
+    .mobile-search {
+      display: block;
+    }
   }
 </style>