style(frontend): preserve wide size for centered spotlight popover

Author: peterpeterparker

src/frontend/src/lib/components/core/Spotlight.svelte

@@ -110,7 +110,7 @@
 
 <svelte:window onjunoSpotlight={() => (visible = true)} {onkeydown} />
 
-<Popover backdrop="dark" center bind:visible>
+<Popover backdrop="dark" center="wide" bind:visible>
 	<div class="container">
 		<div class="search" role="search">
 			<span class="search-title"

src/frontend/src/lib/components/ui/Popover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { nonNullish } from '@dfinity/utils';
+	import { isNullish, nonNullish } from '@dfinity/utils';
 	import type { Snippet } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { stopPropagation } from 'svelte/legacy';
@@ -12,7 +12,7 @@
 		anchor?: HTMLElement | undefined;
 		visible?: boolean;
 		direction?: 'ltr' | 'rtl';
-		center?: boolean;
+		center?: boolean | 'wide';
 		closeButton?: boolean;
 		backdrop?: 'light' | 'dark';
 		children: Snippet;
@@ -22,7 +22,7 @@
 		anchor = undefined,
 		visible = $bindable(false),
 		direction = 'ltr',
-		center = false,
+		center,
 		closeButton = false,
 		backdrop = 'light',
 		children
@@ -41,7 +41,7 @@
 			: { bottom: 0, left: 0, right: 0 });
 
 	let position = $derived<'top' | 'bottom'>(
-		bottom > window.innerHeight - 100 && !center ? 'bottom' : 'top'
+		bottom > window.innerHeight - 100 && isNullish(center) ? 'bottom' : 'top'
 	);
 
 	$effect(() => {
@@ -68,7 +68,8 @@
 				: `--popover-left: ${left}px;`
 		}`}
 		class={`popover ${backdrop}`}
-		class:center
+		class:center={nonNullish(center)}
+		class:wide={center === 'wide'}
 		aria-orientation="vertical"
 		role="menu"
 		tabindex="-1"
@@ -83,7 +84,7 @@
 		></div>
 		<div
 			class={`wrapper ${position}`}
-			class:center
+			class:center={nonNullish(center)}
 			class:rtl={direction === 'rtl'}
 			transition:scale={{ delay: 25, duration: 150, easing: quintOut }}
 		>
@@ -114,6 +115,10 @@
 
 		&.center {
 			--popover-min-size: 280px;
+
+			&.wide {
+				--popover-min-size: 540px;
+			}
 		}
 	}
 </style>