[site] Remove pointer events none on search (#4463)

* remove pointer events none

* allow click outside of search with pointer events

* revert positioning change

* fix weird shrinking

Author: ghostdevv

sites/kit.svelte.dev/src/lib/search/SearchBox.svelte

@@ -189,28 +189,30 @@
 					{/if}
 				{:else}
 					<h2 class="info">{recent_searches.length ? 'Recent searches' : 'No recent searches'}</h2>
-					<ul>
-						{#each recent_searches as search, i}
-							<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-							<li class="recent">
-								<a on:click={() => navigate(search.href)} href={search.href}>
-									<small>{search.breadcrumbs.join('/')}</small>
-									<strong>{search.title}</strong>
-								</a>
-
-								<button
-									aria-label="Delete"
-									on:click={(e) => {
-										$recent = $recent.filter((href) => href !== search.href);
-										e.stopPropagation();
-										e.preventDefault();
-									}}
-								>
-									<Icon name="delete" />
-								</button>
-							</li>
-						{/each}
-					</ul>
+					{#if recent_searches.length}
+						<ul>
+							{#each recent_searches as search, i}
+								<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+								<li class="recent">
+									<a on:click={() => navigate(search.href)} href={search.href}>
+										<small>{search.breadcrumbs.join('/')}</small>
+										<strong>{search.title}</strong>
+									</a>
+
+									<button
+										aria-label="Delete"
+										on:click={(e) => {
+											$recent = $recent.filter((href) => href !== search.href);
+											e.stopPropagation();
+											e.preventDefault();
+										}}
+									>
+										<Icon name="delete" />
+									</button>
+								</li>
+							{/each}
+						</ul>
+					{/if}
 				{/if}
 			</div>
 		</div>
@@ -233,6 +235,7 @@
 		border: none;
 		border-bottom: 1px solid #eee;
 		font-weight: 600;
+		flex-shrink: 0;
 	}
 
 	input::selection {
@@ -286,34 +289,31 @@
 
 	.modal {
 		display: flex;
-		align-items: center;
 		justify-content: center;
+		align-items: center;
 		pointer-events: none;
 	}
 
 	.search-box {
 		position: relative;
-		width: calc(100vw - 2rem);
 		height: calc(100% - 2rem);
+		width: calc(100vw - 2rem);
 		max-width: 50rem;
 		max-height: 50rem;
 		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
 		border-radius: var(--border-r);
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		pointer-events: none;
 	}
 
 	.search-box > * {
 		pointer-events: all;
 	}
 
 	.results {
-		flex: 1;
 		overflow: auto;
 		overscroll-behavior-y: none;
-		pointer-events: none;
 	}
 
 	ul {