style(web): command palette scrollbar visibility and styling

[Copilot]

Fixes the command palette scrollbar not being visible when scrolling and ensures it uses the correct themed colors.

Problem

The command palette's scrollbar was:

• ❌ Not visible when scrolling
• ❌ Not using themed colors from the design system
• ❌ Only appearing when hovering directly over the scrollbar area

This confused users who couldn't tell if there were more options below the visible area.

Solution

Added comprehensive scrollbar styling to the GlobalStyle component that targets react-cmdk's .overflow-y-auto scrollable container:

• Hidden by default: Scrollbar thumb is transparent until interaction
• Visible on palette hover: Shows when hovering anywhere inside the command palette
• Visible during scrolling: Remains visible when actively scrolling
• Themed colors: Uses theme.color.panel.scrollbar and theme.color.panel.scrollbarActive
• Smooth transitions: 0.3s animation for showing/hiding

Implementation Details

The fix uses webkit scrollbar pseudo-selectors with multiple trigger states:

.command-palette .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.command-palette:hover .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: ${theme.color.panel.scrollbar};
}

Screenshots

Closes #[issue-number]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Scrollbar is not visible when scrolling</issue_title>
<issue_description>### Where did this happen?

Hosted (app.compasscalendar.com), Local code with an up-to-date main branch

Expected Behavior

• Command palette's scrollbar is visible when scrolling
• The scrollbar is not visible when not scrolling
• When the user hovers over the scrollbar, the scrollbar is visible.
• When the scrollbar is visible, it matches the existing color styles

Current Behavior

• ❌ Command palette's scrollbar is visible when scrolling
• ❌ The scrollbar is not visible when not scrolling
• 👍 When the user hovers over the scrollbar, the scrollbar is visible.
• ❌ When the scrollbar is visible, it matches the existing color styles

scrollbar-bug.mov

Steps to Reproduce

1. Click cmd palette button or type cmd/windows+k
2. Hover mouse over cmd menu and scroll
3. Hover mouse over the cmd menu scrollbar and scroll

Possible Solution

Adjust styles

Context

This confuses users because they don't know whether there are more options below or not.

• Problem Context

• The command palette uses react-cmdk, which renders an inner scrolling container with classes flex-1 overflow-y-auto.
• Design requirements: scrollbar thumb must stay hidden until the user hovers anywhere inside the palette (no scroll prerequisite),
  then appear using the palette’s themed colors.
• Existing code previously only changed the thumb color when the scrollable div itself received :hover/:focus, so first-time hover over
  surrounding palette failed to show it.

What I Tried

• Added global CSS in GlobalStyle targeting .command-palette .flex-1.overflow-y-auto, defining CSS variables for the thumb color and
  custom WebKit scrollbar styles.
• Added selectors for direct hover/focus and custom smooth transitions.
• Attempted to cascade palette-level hover using descendant selectors and CSS variables.
• Updated theme color token for better contrast.
• Extended the test to assert new stylesheet rules are present (test still passes).
• Reality check: despite CSS updates, real hover in browser still doesn’t activate the scrollbar first time because .command-palette is
  two layers up (HeadlessUI Dialog + inner div), and the React-CMDK structure likely stops the :hover cascade from reaching the scroll
  div until user interacts with it (scrolling scrollable area triggers internal scroll/active state causing custom gradient fallback
  to repaint).
  </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1089

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull Request Overview

This PR fixes the command palette scrollbar visibility and styling issues by adding comprehensive CSS styling to the GlobalStyle component. The scrollbar was previously invisible when scrolling and not using the correct themed colors.

• Adds webkit scrollbar styling for the command palette's scrollable container
• Implements proper hover and focus states to show/hide the scrollbar
• Integrates themed colors from the design system