set a fixed position for command menu

apps/next/src/app/CommandMenu.tsx

@@ -79,46 +79,42 @@ export function CommandMenu({ projects }: { projects: Tables<'project'>[] }) {
 		return () => document.removeEventListener('keydown', onKeyDown)
 	}, [selectedIndex, list, commandMenuIsOpen])
 
+	if (!commandMenuIsOpen) return null
+
 	return (
-		<>
-			{commandMenuIsOpen && (
-				<Modal onClose={closeCommandMenu}>
-					<div className="flex items-center border-gray-200 border-b">
-						{/* <FiSearch width={20} height={20} /> */}
-						<input
-							ref={fieldRef}
-							id="input1"
-							className="input text-sm border-none px-4 py-6 flex-1"
-							placeholder="Type a command or search..."
-							onChange={(event) => {
-								setSelectedIndex(0)
-								setList(
-									initList.filter(
-										({ title }) =>
-											title.toLowerCase().indexOf(event.currentTarget.value) >
-											-1,
-									),
-								)
-							}}
-						/>
-					</div>
-					<span className="sr-only">{selectedIndex}</span>
-					<div className="p-2">
-						{list.map((project, index) => (
-							<div
-								key={index}
-								className="aria-selected:bg-gray-300 text-sm px-2 py-2 rounded"
-								aria-selected={index === selectedIndex}
-								onMouseOver={() => setSelectedIndex(index)}
-								onClick={() => handleAction(list[index])}
-							>
-								{project.title}
-							</div>
-						))}
+		<Modal onClose={closeCommandMenu}>
+			<div className="flex items-center border-gray-200 border-b">
+				<input
+					ref={fieldRef}
+					id="input1"
+					className="input text-sm border-none px-4 py-6 flex-1"
+					placeholder="Type a command or search..."
+					onChange={(event) => {
+						setSelectedIndex(0)
+						setList(
+							initList.filter(
+								({ title }) =>
+									title.toLowerCase().indexOf(event.currentTarget.value) > -1,
+							),
+						)
+					}}
+				/>
+			</div>
+			<span className="sr-only">{selectedIndex}</span>
+			<div className="p-2">
+				{list.map((project, index) => (
+					<div
+						key={index}
+						className="aria-selected:bg-gray-300 text-sm px-2 py-2 rounded"
+						aria-selected={index === selectedIndex}
+						onMouseOver={() => setSelectedIndex(index)}
+						onClick={() => handleAction(list[index])}
+					>
+						{project.title}
 					</div>
-				</Modal>
-			)}
-		</>
+				))}
+			</div>
+		</Modal>
 	)
 }
 
@@ -129,18 +125,18 @@ const Modal = ({
 	const rootRef = useClickOutside<HTMLDivElement>(onClose)
 
 	return (
-		<div>
-			<div className="fixed inset-0 z-40 min-h-screen flex items-center justify-center">
+		<>
+			<div className="fixed inset-0 z-40 min-h-screen">
 				<div
 					ref={rootRef}
-					className="w-full max-w-md rounded shadow-xl overflow-hidden"
+					className="w-full max-w-md rounded shadow-xl overflow-hidden mx-auto mt-20"
 				>
 					<div className="bg-white dark:bg-black-rich rounded border-gray-200 border">
 						{children}
 					</div>
 				</div>
 			</div>
 			<div className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur"></div>
-		</div>
+		</>
 	)
 }