feat(studio): polish command palette interactions and layout

[SaadNiaziDev]

Summary

Closes #195.

Polishes Studio command palette keyboard behavior, focus handling, and visual details so search, navigation, and Record lookup feel consistent with the rest of Studio.

Interactions

• Arrow ↑/↓ skips unavailable (disabled) commands and wraps among available ones
• Initial active selection prefers the first available command
• Hover no longer activates disabled rows
• Selecting a command no longer restores focus onto the top-bar Search trigger, which previously left a stuck focus ring
• Esc / dismiss still restores prior page focus as before

Record search chrome

• Clearer Back control with icon and accessible label
• Dedicated entity select styling (separate from the search input)
• Combobox accessibility attributes on the search field (aria-label, aria-autocomplete, autocomplete, spellcheck)

Visual / layout polish

• Denser command rows with stacked label + detail, shortcut badges, and an active accent rail
• Footer hints simplified to ↑ ↓ / Enter / Esc
• Palette dialog width and scroll behavior tightened for desktop and small screens
• Palette-only grid templates (--palette, --records) so Keyboard Shortcuts can keep sharing the dialog panel class without inheriting palette row layout

Tests

• Added nextAvailableCommandId coverage for skip-unavailable + wrap behavior

Test plan

• Open palette with ⌘K and with the Search trigger; both paths work
• With a disabled command present (e.g. Toggle sidebar when collapsed is unavailable), ↑/↓ skips it
• Select a page/Entity command; destination opens and Search trigger does not keep a focus ring
• Esc closes palette and returns focus sensibly
• Run Search Records from the palette; Back + entity select + ID search still work
• Open Keyboard shortcuts; layout still looks correct (shared dialog class unchanged)
• npm test --prefix apps/studio/ui passes

Made with Cursor