Add new responsive styles to input on api pagination (#2333)

* Add new responsive styles to input on api pagination

* Fix weird

* Add w-full sm:w-1/2 to input

* Fix weird flex row on xl screen size

* Update src/lib/holocene/api-pagination.svelte

simplify with flex-wrap

Co-authored-by: Laura Whitaker <[email protected]>

* Update src/lib/holocene/api-pagination.svelte

Add better responsive styles

Co-authored-by: Laura Whitaker <[email protected]>

* Add grow back to input

* Update src/lib/holocene/api-pagination.svelte

Co-authored-by: Laura Whitaker <[email protected]>

---------

Co-authored-by: Laura Whitaker <[email protected]>

Author: KATIETOLER

Diff for: src/lib/holocene/api-pagination.svelte

@@ -215,7 +215,7 @@
 <slot name="header" visibleItems={$store.visibleItems} />
 <div class="relative mb-8 flex flex-col gap-4">
   <div
-    class="flex flex-col items-center gap-4 lg:flex-row {$$slots[
+    class="flex flex-row flex-wrap items-center gap-4 {$$slots[
       'action-top-left'
     ]
       ? 'justify-between'
@@ -237,7 +237,7 @@
       />
     {/if}
     <nav
-      class="flex shrink-0 flex-col gap-4 md:flex-row"
+      class="flex flex-row flex-wrap justify-center gap-4"
       aria-label="{$$restProps['aria-label']} 1"
     >
       <slot name="action-top-center" />