Scrollbar is not visible when scrolling

[tyler-dane]

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).