fix search collapsing before click #741

StampyAI · Jun 25, 2024 · 4c33df5 · 4c33df5
1 parent 7baa4ee
commit 4c33df5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/app/components/SearchInput/Input.tsx b/app/components/SearchInput/Input.tsx
@@ -28,7 +28,9 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput
   const clear = () => handleSearch('')
 
   return (
-    <div className={`search-box bordered ${expandable ? 'expandable' : ''}`}>
+    <div
+      className={`search-box bordered ${expandable ? 'expandable' : ''} ${search ? 'expanded' : ''}`}
+    >
       <div className="search-content">
         <MagnifyingIcon className="iconsMagnifyingGlass" />
         <input

diff --git a/app/components/SearchInput/input.css b/app/components/SearchInput/input.css
@@ -3,7 +3,8 @@
   box-sizing: border-box;
   border-radius: var(--border-radius);
 }
-.search-box.expandable:focus-within {
+.search-box.expandable:focus-within,
+.search-box.expandable.expanded {
   width: 21.46vw;
 }