From 42a49e6461f1834a1e54563e908fe75457de6d96 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 28 Sep 2024 23:30:09 +0200
Subject: [PATCH] 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 | 6 ++++++
 packages/spotlight/src/modes/index.tsx          | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/spotlight/src/components/spotlight.tsx b/packages/spotlight/src/components/spotlight.tsx
index c9c9c2904..d55d7dbcc 100644
--- a/packages/spotlight/src/components/spotlight.tsx
+++ b/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
diff --git a/packages/spotlight/src/modes/index.tsx b/packages/spotlight/src/modes/index.tsx
index 29b0f220f..077e8fa11 100644
--- a/packages/spotlight/src/modes/index.tsx
+++ b/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;