fix: fixed search bar layout and ux: can now click to preview search results

[adamleithp]

Loom: https://www.loom.com/share/e709b159112b42cb991d3a302424b825?sid=d4dde375-3c7d-49df-a805-39635f4f279a

Problem

I found the UX of the search bar hard to understand:

• Search results were not clickable (mouse), and the preview of the result was only visible when navigating with keyboard.
• Search input now has focus-visible outline styles.

I found the layout of the search bar:

• Mobile: not-friendly
• Desktop: To break slightly when previewing long un-breaking strings.
• Updated layout of search bar with a more rigid grid layout, which is mobile first.

Changes

• Updated DOM layout of search bar with grid. Better mobile view.
• Search bar now has focus-visible outline styles.
• Desktop:
  • clicking search results allow you to preview the item (was previously only available when using keyboard)
  • Show keyboard ENTER keyboard shortcut to express how you jump to search item page. Mobile still acts the same (click goes to page)

Does this work well for both Cloud and self-hosted?

Yes

How did you test this code?

Opened on major browsers (both keyboard functionality and clicking), tested mobile

[corywatilo]

👏 Yesssss.

Only feedback: What if we moved the keyboard shortcut inside the button so we don't duplicate the text? Like:

Open ⏎

[github-actions]

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged

Filename	Size
frontend/dist/toolbar.js	1.11 MB

_{compressed-size-action}

[posthog-bot]

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

• chromium: 0 added, 4 modified, 0 deleted (diff for shard 1, diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[Twixes]

Great improvements, just finding the focus-visible styling odd, and +1 to Cory's point

[adamleithp]

👏 Yesssss.

Only feedback: What if we moved the keyboard shortcut inside the button so we don't duplicate the text? Like:

Open ⏎

@corywatilo

[corywatilo]

I generally like it! Wdyt? (I think we can tweak later but imo 🚀?)

[posthog-bot]

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

• chromium: 0 added, 4 modified, 0 deleted (diff for shard 1, diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[Twixes]

This is nice