From 4c33df581c216fbc2eaf9cb0ece2c4edc238fbef Mon Sep 17 00:00:00 2001
From: Peter Hozak <peter.hozak@gmail.com>
Date: Tue, 25 Jun 2024 08:50:58 +0200
Subject: [PATCH] fix search collapsing before click #741

---
 app/components/SearchInput/Input.tsx | 4 +++-
 app/components/SearchInput/input.css | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/SearchInput/Input.tsx b/app/components/SearchInput/Input.tsx
index b408f177..c313eeda 100644
--- 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
index b2ef14b6..a9fae302 100644
--- 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;
 }