fix: adjust search bar padding and visibility based on input state (#20598)

This commit is contained in:
Paweł Wojtaszko 2025-08-04 19:46:46 +02:00 committed by GitHub
parent 5901c2e963
commit b56a272f64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -230,7 +230,8 @@
type="text" type="text"
name="q" name="q"
id="main-search-bar" id="main-search-bar"
class="w-full transition-all border-2 px-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg class="w-full transition-all border-2 ps-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg
{showClearIcon ? 'pe-[90px]' : 'pe-14'}
{grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'} {grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
{showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'} {showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
{searchStore.isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}" {searchStore.isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"
@ -285,6 +286,7 @@
{#if isFocus} {#if isFocus}
<div <div
class="absolute inset-y-0 flex items-center" class="absolute inset-y-0 flex items-center"
class:max-md:hidden={value}
class:end-16={isFocus} class:end-16={isFocus}
class:end-28={isFocus && value.length > 0} class:end-28={isFocus && value.length > 0}
> >