demo: don't tuck step pickers under the top nav bar

Both the Appearances StepPicker and the States picker were sticky/
fixed with a low z-index, so they slid under the z-100 nav bar on
scroll. Park them with --demo-nav-height offset instead.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: masnwilliams

packages/demo/src/Appearances.tsx

@@ -815,7 +815,8 @@ function StepPicker({
     <div
       style={{
         position: "sticky",
-        top: 0,
+        // Park just under the demo's top nav bar so we don't slide under it.
+        top: "var(--demo-nav-height)",
         zIndex: 10,
         background: "var(--background)",
         borderBottom: "1px solid var(--border)",

packages/demo/src/States.tsx

@@ -222,7 +222,9 @@ export function States() {
 const pickerStyles: Record<string, React.CSSProperties> = {
   wrapper: {
     position: "fixed",
-    top: 16,
+    // Sits just below the demo's top nav bar (which is sticky with z-index
+    // 100). 16px gap keeps it from butting against the nav border.
+    top: "calc(var(--demo-nav-height) + 16px)",
     right: 16,
     zIndex: 50,
     background: "var(--card)",

packages/demo/src/globals.css

@@ -13,6 +13,9 @@
   --muted-foreground: #6b7280;
   --border: #e5e7eb;
   --accent: #6366f1;
+  /* Pinned in JSX too — used by sticky elements (e.g. Appearances StepPicker)
+     so they don't slide under the top tab bar. */
+  --demo-nav-height: 49px;
 }
 
 @media (prefers-color-scheme: dark) {