fix: Fix search animation

astriaorg · Feb 12, 2025 · 3ea8495 · 3ea8495
1 parent 2a24f6f
commit 3ea8495
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git 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
@@ -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>
   );
 };