Skip to content

Fix mention autocomplete layout in narrow threads#1282

Merged
wesbillman merged 2 commits into
mainfrom
pinky/mention-autocomplete-layout
Jun 25, 2026
Merged

Fix mention autocomplete layout in narrow threads#1282
wesbillman merged 2 commits into
mainfrom
pinky/mention-autocomplete-layout

Conversation

@wesbillman

@wesbillman wesbillman commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Prioritize the display name in mention autocomplete rows by giving it its own primary line.
  • Keep avatars visible in the primary row while moving agent/role/owner/not-in-channel metadata to a smaller secondary line.
  • Add a regression that opens a minimum-width thread panel and verifies multiple long agent names remain readable with avatars and metadata present.

Screenshots

Before

before

After

after

Minimum-width thread panel with multiple matches

narrow thread autocomplete avatars restored

Test plan

  • bin/pnpm -C desktop exec biome check src/features/messages/ui/MentionAutocomplete.tsx tests/e2e/mentions.spec.ts
  • bin/pnpm -C desktop build
  • bin/pnpm -C desktop exec playwright test --project=smoke tests/e2e/mentions.spec.ts

wesbillman and others added 2 commits June 25, 2026 09:40
Keep mention suggestion avatars visible while making the display name the primary row content. Move agent/role/owner metadata into a smaller secondary line so narrow thread panels preserve readable names without letting metadata crowd the row.

Add an e2e regression that opens a minimum-width thread panel and verifies multiple long agent names remain readable with avatars and metadata present.

Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Use the shared text-2xs Tailwind token for autocomplete metadata so the desktop px-text guard passes while preserving the intended 11px visual size.

Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
@wesbillman wesbillman merged commit 227518c into main Jun 25, 2026
25 checks passed
@wesbillman wesbillman deleted the pinky/mention-autocomplete-layout branch June 25, 2026 16:26
tlongwell-block pushed a commit that referenced this pull request Jun 26, 2026
Brings PR #1285 (docs/spec-only) up to date with main (23 commits). The branch base predated PR #1282 (narrow-thread header layout fix), so the Desktop Smoke E2E test messaging.spec.ts:775 failed on the stale base while passing on main. No PR file overlaps main; spec/model bytes untouched.

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
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