Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: eliminate layout shift in recipe search by reserving filter panel space
All checks were successful
CI / update (push) Successful in 1m10s
Details

Browse Source 
Changed FilterPanel from conditional rendering to always-rendered with visibility control. This prevents layout shift when JavaScript loads by reserving the space upfront while keeping it visually hidden for non-JS users.
This commit is contained in:
Alexander Bocken
2026-01-05 23:19:39 +01:00
parent ab84ffc131
commit 2de51ee492
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/Search.svelte
View File

@@ -345,7 +345,7 @@ scale: 0.8 0.8;
</button> </button>
</form> </form>
{#if showFilters} <div style="visibility: {showFilters ? 'visible' : 'hidden'}; pointer-events: {showFilters ? 'auto' : 'none'};">
<FilterPanel <FilterPanel
availableCategories={categories} availableCategories={categories}
{availableTags} {availableTags}
@@ -363,4 +363,4 @@ scale: 0.8 0.8;
onSeasonChange={handleSeasonChange} onSeasonChange={handleSeasonChange}
onFavoritesToggle={handleFavoritesToggle} onFavoritesToggle={handleFavoritesToggle}
/> />
{/if} </div>