From c2047bf1cf6a20042ccaaaf5fd0788dfba2858dd Mon Sep 17 00:00:00 2001
From: Katie Toler <katie.toler@temporal.io>
Date: Tue, 22 Oct 2024 09:25:11 -0600
Subject: [PATCH] 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 <laura.whitaker@temporal.io>

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

Add better responsive styles

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>

* Add grow back to input

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

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>

---------

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>
---
 src/lib/holocene/api-pagination.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/holocene/api-pagination.svelte b/src/lib/holocene/api-pagination.svelte
index 8c13f1103..35241ffa1 100644
--- a/src/lib/holocene/api-pagination.svelte
+++ b/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" />