Skip to content

redesign search dialog (no accent ring, cleaner rows) - #682

Merged
Flotapponnier merged 1 commit into
devfrom
feat/header-search-bar
Jun 24, 2026
Merged

redesign search dialog (no accent ring, cleaner rows)#682
Flotapponnier merged 1 commit into
devfrom
feat/header-search-bar

Conversation

@Flotapponnier

Copy link
Copy Markdown
Collaborator

Summary

Follow-up to #680 — commit landed after the merge. Cleans up the search dialog itself (the modal that opens on click / Cmd+K) which the previous PRs left untouched.

Fixes

  • Orange focus ring removed: the global `input:focus-visible { outline: 2px solid accent }` rule was reading as a validation error on the cmdk input. `[cmdk-input]` now opts out of the universal ring (rest of the site still gets it).
  • `{{best_name}}` in search descriptions: build-time index had no Prom data to resolve templates, so descriptions like "{{best_name}} leads ..." shipped raw. Now fall back to `spec.subtitle` when `seo_description` contains `{{` tokens.

Redesign

  • Wider modal (`max-w-2xl` vs `max-w-xl`), softer border, deeper shadow.
  • Backdrop blur bumped (`backdrop-blur-md`).
  • Item rows: dropped the bordered "BENCHMARK" pill, replaced with small uppercase kind label + middle-dot + title, plus an ArrowRight that lights up on the selected row.
  • Footer with kbd hints (↑↓ navigate, ↵ open, esc close) replacing the cramped microcaps.

Test plan

  • Open dialog (Cmd+K) → no orange ring on the input.
  • Empty query → "Popular benchmarks" group renders with clean rows.
  • Type "rpc" → no `{{best_name}}` in any description.
  • Arrow up/down + enter navigates correctly; esc closes.

- Drop the global accent outline on the cmdk input (was reading as a
  validation error, not a focus state). Universal :focus-visible rule
  stays; we opt out only on [cmdk-input].
- Wider modal (max-w-2xl), softer border, deeper shadow, stronger
  backdrop blur.
- Item rows: drop the bordered BENCHMARK pill (chunky/dated), use a
  small uppercase kind label + middle-dot separator + title, with an
  ArrowRight that lights up on the selected row.
- Footer with kbd hints (↑ ↓ navigate, ↵ open, esc close) replacing
  the cramped 'ENTER TO GO / ESC TO CLOSE' microcaps.
- Search index: drop '{{best_name}}' tokens from descriptions. Fall
  back to spec.subtitle when seo_description contains template tokens
  (build-time index has no Prom data to resolve them).
@Flotapponnier
Flotapponnier merged commit c246763 into dev Jun 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant