fix: eliminate layout shift in recipe search by reserving filter panel space
All checks were successful
CI / update (push) Successful in 1m10s
All checks were successful
CI / update (push) Successful in 1m10s
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:
@@ -345,7 +345,7 @@ scale: 0.8 0.8;
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{#if showFilters}
|
||||
<div style="visibility: {showFilters ? 'visible' : 'hidden'}; pointer-events: {showFilters ? 'auto' : 'none'};">
|
||||
<FilterPanel
|
||||
availableCategories={categories}
|
||||
{availableTags}
|
||||
@@ -363,4 +363,4 @@ scale: 0.8 0.8;
|
||||
onSeasonChange={handleSeasonChange}
|
||||
onFavoritesToggle={handleFavoritesToggle}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user