Skip to content

fix: emoji picker places itself on screen + keycap emoji images (0.9.1) - #309

Merged
ralyodio merged 1 commit into
masterfrom
fix/emoji-picker-placement
Oct 12, 2026
Merged

ralyodio merged 1 commit into
masterfrom
fix/emoji-picker-placement

Conversation

@ralyodio

Copy link
Copy Markdown
Contributor

Problem

On qrypt.chat/settings the Profile emoji picker opened upward from the button (it inherited the composer's bottom: calc(100% + .5rem) inside a zero-height wrapper). At the top of the page that put it at y≈−70px, under the sticky navbar: search and category tabs hidden, the grid looking empty. The reaction picker had the same flaw near the top of the message list (clipped by the scroller).

Fix

  • src/lib/emoji/placement.js — placePopover(): try the preferred side, then opposite, right, left; clamp inside the viewport below the navbar; shrink to the taller side when nothing fits.
  • EmojiPicker is position: fixed against anchorRef (or its parent), re-placed on scroll/resize; new prefer / align props.
  • Settings anchors to the emoji button and prefers below; reactions end-align on own messages; composer still opens above.
  • emojiKey() pads codepoints to 4 hex digits like the OpenEmoji files, so 14 keycap/©/® emoji stop 404ing (picker and messages).

Verified

  • Headless Chrome against a local build: settings picker now at top 322 (was −70), search + tabs visible; 390×700 phone opens below and shrinks to fit; composer opens above; reaction near the top of a scroller flips below, right-aligned, not clipped.
  • New tests: placement (7) + every index emoji has an image file. Full suite 761/761, oxlint clean.

🤖 Generated with Claude Code

… keycap emoji images (0.9.1)

On /settings the picker kept the composer's "open upward" CSS inside a
zero-height wrapper, so it opened above the button and ran under the sticky
navbar: search and category tabs hidden, the grid looking empty. The reaction
picker had the same problem near the top of the message list, clipped by the
scroller.

EmojiPicker is now position: fixed next to an anchor (anchorRef, or the
element it is rendered in). placePopover() tries the preferred side, then the
opposite, then right, then left, clamps inside the viewport below the navbar,
and shrinks to the taller side when nothing fits whole. Settings anchors to
the emoji button and prefers below; reactions end-align on your own messages;
the composer still opens above.

emojiKey() now pads codepoints to four hex digits like the OpenEmoji files, so
#️⃣ 0️⃣-9️⃣ *️⃣ ©️ ®️ (14 emoji) stop 404ing in the picker and in messages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

ThreatCrush Security Scan

13 finding(s)

MEDIUM: 9 | LOW: 4

Severity Rule Location
MEDIUM js-unescaped-html-sink src/app/blog/[slug]/page.jsx:38
MEDIUM js-unescaped-html-sink src/app/blog/[slug]/page.jsx:66
MEDIUM js-unescaped-html-sink src/app/faq/page.jsx:57
MEDIUM js-unescaped-html-sink src/app/layout.jsx:141
MEDIUM js-unescaped-html-sink src/app/layout.jsx:145
MEDIUM js-unescaped-html-sink src/app/page.jsx:47
MEDIUM redos-nested-quantifier src/lib/auth/dns-name.js:88
MEDIUM js-unescaped-html-sink src/lib/components/chat/MessageItem.jsx:85
MEDIUM js-unescaped-html-sink src/lib/components/chat/MessageItem.jsx:130
LOW secret-generic-credential src/app/api/auth/register-anon/route.test.js:32
LOW secret-jwt tests/debug-sms.js:10
LOW secret-generic-credential tests/private-key-import-export.test.js:252
LOW secret-generic-credential tests/private-key-import-export.test.js:264

Snippets are redacted; ThreatCrush never prints matched credential material.

@ralyodio
ralyodio merged commit 371b852 into master Oct 12, 2026
12 of 13 checks passed
@ralyodio
ralyodio deleted the fix/emoji-picker-placement branch October 12, 2026 23:34
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