From 4d4e88fb662ca34c217f8472f129b562fb25f067 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 11 Oct 2025 02:35:21 -0700
Subject: [PATCH] update search input styles

---
 .../features/shared/components/search-input.tsx       | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/renderer/features/shared/components/search-input.tsx b/src/renderer/features/shared/components/search-input.tsx
index 75a1b2ce6..8159683e1 100644
--- a/src/renderer/features/shared/components/search-input.tsx
+++ b/src/renderer/features/shared/components/search-input.tsx
@@ -1,5 +1,5 @@
 import { useHotkeys } from '@mantine/hooks';
-import { ChangeEvent, KeyboardEvent, useRef } from 'react';
+import { ChangeEvent, KeyboardEvent, useRef, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useSettingsStore } from '/@/renderer/store';
@@ -35,14 +35,21 @@ export const SearchInput = ({ onChange, ...props }: SearchInputProps) => {
         }
     };
 
+    const [isFocused, setIsFocused] = useState(false);
+
+    const hasValue = props.value || ref.current?.value;
+
     return (
         <TextInput
             leftSection={<Icon icon="search" />}
+            maw="20dvw"
+            onBlur={() => setIsFocused(false)}
             onChange={onChange}
+            onFocus={() => setIsFocused(true)}
             onKeyDown={handleEscape}
             ref={ref}
             size="sm"
-            width={200}
+            width={isFocused || hasValue ? '200px' : '100px'}
             {...props}
             rightSection={
                 ref.current?.value ? (