Implement command palette scrollbar visibility fix

Co-authored-by: tyler-dane <30163055+tyler-dane@users.noreply.github.com>

Author: Copilot

packages/web/src/components/GlobalStyle/styled.ts

@@ -21,4 +21,37 @@ export const GlobalStyle = createGlobalStyle`
   :focus-visible {
     outline: none;
   }
+
+  /* Command Palette Scrollbar Styling */
+  .command-palette .overflow-y-auto {
+    /* Always reserve scrollbar space */
+    scrollbar-width: auto;
+    
+    /* Webkit scrollbar styling (Chrome, Safari, Edge) */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    /* Hide the scrollbar thumb by default (transparent) */
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+      border-radius: ${({ theme }) => theme.shape.borderRadius};
+      transition: background-color 0.3s ease;
+    }
+
+    /* On hover of the container, make the scrollbar thumb visible */
+    &:hover::-webkit-scrollbar-thumb {
+      background-color: ${({ theme }) => theme.color.panel.scrollbar};
+    }
+
+    /* On hover of the thumb itself, make it more visible */
+    &:hover::-webkit-scrollbar-thumb:hover {
+      background-color: ${({ theme }) => theme.color.panel.scrollbarActive};
+    }
+
+    /* Show scrollbar during active scrolling */
+    &.scrolling::-webkit-scrollbar-thumb {
+      background-color: ${({ theme }) => theme.color.panel.scrollbar};
+    }
+  }
 `;

packages/web/src/views/CmdPalette/CmdPalette.tsx

@@ -53,6 +53,47 @@ const CmdPalette = ({
     setOpen(_open);
   }, [_open]);
 
+  // Handle scrollbar visibility during scrolling
+  useEffect(() => {
+    if (!open) return;
+
+    const handleScroll = () => {
+      const scrollableElement = document.querySelector(
+        ".command-palette .overflow-y-auto",
+      );
+      if (scrollableElement) {
+        scrollableElement.classList.add("scrolling");
+
+        // Clear any existing timeout
+        const existingTimeout = (scrollableElement as any).scrollTimeout;
+        if (existingTimeout) {
+          clearTimeout(existingTimeout);
+        }
+
+        // Remove the scrolling class after scrolling stops
+        (scrollableElement as any).scrollTimeout = setTimeout(() => {
+          scrollableElement.classList.remove("scrolling");
+        }, 150);
+      }
+    };
+
+    const scrollableElement = document.querySelector(
+      ".command-palette .overflow-y-auto",
+    );
+
+    if (scrollableElement) {
+      scrollableElement.addEventListener("scroll", handleScroll);
+
+      return () => {
+        scrollableElement.removeEventListener("scroll", handleScroll);
+        const timeout = (scrollableElement as any).scrollTimeout;
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+      };
+    }
+  }, [open]);
+
   useHandleOpenCommandPalette(setOpen);
 
   const handleCreateSomedayDraft = async (