From 31a722db266aa0f9fb47fe725460b04c0a8c5cab Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 30 Apr 2025 19:45:19 -0500
Subject: [PATCH] Refine cmd-k styles for safari

---
 src/cmdk/CommandKClient.tsx       | 11 +++--------
 src/components/useMaskedScroll.ts |  4 ++--
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/cmdk/CommandKClient.tsx b/src/cmdk/CommandKClient.tsx
index 1566759d..6653c526 100644
--- a/src/cmdk/CommandKClient.tsx
+++ b/src/cmdk/CommandKClient.tsx
@@ -167,7 +167,6 @@ export default function CommandKClient({
   const { styleMask, updateMask } = useMaskedScroll({
     ref: refScroll,
     updateMaskOnEvents: false,
-    fadeSize: 50,
   });
   
   // Manage action/path waiting state
@@ -587,15 +586,11 @@ export default function CommandKClient({
         <Command.List
           ref={refScroll}
           onScroll={updateMask}
-          className={clsx(
-            'overflow-y-auto',
-            'mx-3 pt-2 pb-3.5',
-            '[&>*>*>*]:mt-2.5',
-          )}
+          className="overflow-y-auto"
           style={{ ...styleMask, maxHeight }}
         >
-          <div className="-mt-2.5">
-            <Command.Empty className="mt-1 pl-3 text-dim pb-1">
+          <div className="px-3 pt-2 pb-3.5">
+            <Command.Empty className="mt-1 pl-3 text-dim text-base pb-0.5">
               {isLoading ? 'Searching ...' : 'No results found'}
             </Command.Empty>
             {queriedSections
diff --git a/src/components/useMaskedScroll.ts b/src/components/useMaskedScroll.ts
index 4a1546ee..99419bdc 100644
--- a/src/components/useMaskedScroll.ts
+++ b/src/components/useMaskedScroll.ts
@@ -77,13 +77,13 @@ export default function useMaskedScroll({
       window.CSS.registerProperty({
         name: CSS_VAR_MASK_COLOR_START,
         syntax: '<color>',
-        initialValue: 'rgba(0, 0, 0, 0)',
+        initialValue: 'rgba(0, 0, 0, 1)',
         inherits: false,
       });
       window.CSS.registerProperty({
         name: CSS_VAR_MASK_COLOR_END,
         syntax: '<color>',
-        initialValue: 'rgba(0, 0, 0, 0)',
+        initialValue: 'rgba(0, 0, 0, 1)',
         inherits: false,
       });
     } catch {}