fix(spotlight): x button not clickable, help links open in current tab, bad screen usage on mobile (#1199)

* fix: spotlight help links should open in new tab

* fix: x button is not clickable in spotlight

* fix: reduce offset for spotlight, to improve screen usage on mobile

packages/spotlight/src/components/spotlight.tsx

@@ -28,6 +28,7 @@ export const Spotlight = () => {
 
   return (
     <MantineSpotlight.Root
+      yOffset={8}
       onSpotlightClose={() => {
         setMode("help");
         setChildrenOptions(null);
@@ -64,6 +65,11 @@ export const Spotlight = () => {
             {activeMode.modeKey !== "help" ? <Kbd size="sm">{activeMode.character}</Kbd> : null}
           </Group>
         }
+        styles={{
+          section: {
+            pointerEvents: "all",
+          },
+        }}
         rightSection={
           mode === "help" ? undefined : (
             <ActionIcon

packages/spotlight/src/modes/index.tsx

@@ -66,7 +66,7 @@ const helpMode = {
         </Group>
       ),
       filter: () => true,
-      useInteraction: interaction.link(({ href }) => ({ href })),
+      useInteraction: interaction.link(({ href }) => ({ href, newTab: true })),
     }),
   ],
 } satisfies SearchMode;