From 3ea8495684980cfeb67cdb92b6b453596886e4a8 Mon Sep 17 00:00:00 2001
From: Jessica Xiao <15721063+essj@users.noreply.github.com>
Date: Wed, 12 Feb 2025 14:05:02 -0700
Subject: [PATCH] fix: Fix search animation

---
 .../earn/components/Table/TablePagination.tsx |  2 +-
 .../app/earn/components/Table/TableSearch.tsx | 58 +++++++++----------
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/apps/flame-defi/app/earn/components/Table/TablePagination.tsx b/apps/flame-defi/app/earn/components/Table/TablePagination.tsx
index 428b4f1..edbabb8 100644
--- a/apps/flame-defi/app/earn/components/Table/TablePagination.tsx
+++ b/apps/flame-defi/app/earn/components/Table/TablePagination.tsx
@@ -23,7 +23,7 @@ export const TablePagination = () => {
   }, [data?.vaults?.pageInfo?.countTotal]);
 
   return (
-    <Skeleton isLoading={isPending} className="w-[200px]">
+    <Skeleton isLoading={isPending} className="w-52">
       <Pagination>
         <PaginationContent>
           <PaginationItem>
diff --git a/apps/flame-defi/app/earn/components/Table/TableSearch.tsx b/apps/flame-defi/app/earn/components/Table/TableSearch.tsx
index 6febffe..2ac4c87 100644
--- a/apps/flame-defi/app/earn/components/Table/TableSearch.tsx
+++ b/apps/flame-defi/app/earn/components/Table/TableSearch.tsx
@@ -18,37 +18,35 @@ export const TableSearch = () => {
   return (
     <Skeleton
       isLoading={isRefetching && !data?.vaults.items?.length}
-      className="w-[200px]"
+      className="w-full md:w-52"
     >
-      <Input
-        ref={inputRef}
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        onBlur={() => setIsFocused(false)}
-        onFocus={() => setIsFocused(true)}
-        type="text"
-        endAdornment={
-          <div
-            className={cn(
-              "transition-all duration-300 ease-in-out",
-              !search && !isFocused && "-ml-10",
-            )}
-            onClick={() => {
-              if (inputRef.current && !isFocused) {
-                setIsFocused(true);
-                inputRef.current.focus();
-              }
-            }}
-          >
-            <SearchIcon aria-label="Search" size={24} />
-          </div>
-        }
-        className={cn(
-          "transition-all duration-300 ease-in-out",
-          search ? "w-[200px]" : "w-0 border-transparent outline-none",
-          "focus-visible:w-[200px] focus-visible:border-orange-soft",
-        )}
-      />
+      <div className="w-full *:w-full">
+        <Input
+          ref={inputRef}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          onBlur={() => setIsFocused(false)}
+          onFocus={() => setIsFocused(true)}
+          type="text"
+          startAdornment={
+            <div
+              onClick={() => {
+                if (inputRef.current && !isFocused) {
+                  setIsFocused(true);
+                  inputRef.current.focus();
+                }
+              }}
+            >
+              <SearchIcon aria-label="Search" size={24} />
+            </div>
+          }
+          className={cn(
+            "transition-all duration-300 ease-in-out",
+            search ? "w-full md:w-52" : "w-0 border-transparent outline-none",
+            "focus-visible:w-full md:focus-visible:w-52 focus-visible:border-orange-soft",
+          )}
+        />
+      </div>
     </Skeleton>
   );
 };