LotusGuild/cinny
3
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Phone: composer emoji/sticker board opens 31 px off the left edge of the screen #264

New Issue
Closed
opened 2026-10-04 17:41:26 -04:00 by jared · 1 comment
jared commented 2026-10-04 17:41:26 -04:00
Owner
Copy Link
Copy Source

What happens
On a 390 px-wide phone (Pixel/iPhone portrait), the composer's emoji button opens the Emoji/Sticker board at x = −31 px. The first emoji column, the "Sticker" tab label ("icker") and the search field ("earch") are cut off (screenshot).

At 360 px wide the board happens to fit (x = 5), so the cause is the anchoring, not the width.

Measured (Playwright, isMobile): board rect { left: -31, right: 270, width: 301, viewport: 390 }.

Also seen

  • The RECENT group heading is shown with nothing under it on a fresh account.

Fix

  • Clamp the popout to the viewport (PopOut align/offset, or max-width: calc(100vw - 16px)).
  • On phones, use a bottom sheet (#166/#199 already use this pattern).

Screenshot

F13-phone-emoji-board.png

More context

Who: phones around 375–414 px wide (most iPhones and Pixels) on the web/PWA. At 360 px the board happens to fit.

Manual repro: open any room on a phone and tap the 😊 button in the composer. The board's left 31 px (the first emoji column, the "Sticker" tab and the search field) are off-screen.

Likely cause: the board is anchored to the emoji button's position with a fixed width (≈ 301 px plus the category rail) and isn't clamped to the viewport. Worth checking upstream Cinny at the same width; the Lotus composer moves the emoji button further right than upstream does.

Acceptance criteria: at 360, 390 and 414 px the whole board is inside the viewport (getBoundingClientRect().left >= 0); add it to the mobile Playwright project.

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

**What happens** On a 390 px-wide phone (Pixel/iPhone portrait), the composer's emoji button opens the Emoji/Sticker board at **x = −31 px**. The first emoji column, the "Sticker" tab label ("icker") and the search field ("earch") are cut off (screenshot). At 360 px wide the board happens to fit (x = 5), so the cause is the anchoring, not the width. **Measured** (Playwright, `isMobile`): board rect `{ left: -31, right: 270, width: 301, viewport: 390 }`. **Also seen** - The **RECENT** group heading is shown with nothing under it on a fresh account. **Fix** - Clamp the popout to the viewport (`PopOut` `align`/offset, or `max-width: calc(100vw - 16px)`). - On phones, use a bottom sheet (#166/#199 already use this pattern). **Screenshot** ![F13-phone-emoji-board.png](https://code.lotusguild.org/attachments/8e890537-a22f-4f8e-bd05-ecb9738a8cb3) ### More context **Who:** phones around 375–414 px wide (most iPhones and Pixels) on the web/PWA. At 360 px the board happens to fit. **Manual repro:** open any room on a phone and tap the 😊 button in the composer. The board's left 31 px (the first emoji column, the "Sticker" tab and the search field) are off-screen. **Likely cause:** the board is anchored to the emoji button's position with a fixed width (≈ 301 px plus the category rail) and isn't clamped to the viewport. Worth checking upstream Cinny at the same width; the Lotus composer moves the emoji button further right than upstream does. **Acceptance criteria:** at 360, 390 and 414 px the whole board is inside the viewport (`getBoundingClientRect().left >= 0`); add it to the mobile Playwright project. --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
F13-phone-emoji-board.png
534 KiB
jared added the bugpriority: mediumarea: mobile labels 2026-10-04 17:41:26 -04:00
jared commented 2026-10-19 14:19:10 -04:00
Author
Owner
Copy Link
Copy Source

Re-measured on current lotus (Playwright, Pixel 7 emulation; first and second open):

viewport board left board right width
320 4 292 288
360 4 332 328
375 4 347 343
390 4 362 358
414 4 386 382

The board now sizes itself to the viewport and sits 4 px from the left edge at every width, so the first emoji column, the Sticker tab and the search field are all visible. It was fixed by a later composer change, so no new code was needed. Closing.

Re-measured on current `lotus` (Playwright, Pixel 7 emulation; first and second open): | viewport | board left | board right | width | |---|---|---|---| | 320 | 4 | 292 | 288 | | 360 | 4 | 332 | 328 | | 375 | 4 | 347 | 343 | | 390 | 4 | 362 | 358 | | 414 | 4 | 386 | 382 | The board now sizes itself to the viewport and sits 4 px from the left edge at every width, so the first emoji column, the Sticker tab and the search field are all visible. It was fixed by a later composer change, so no new code was needed. Closing.
jared closed this issue 2026-10-19 14:19:10 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels area: mobile bug priority: medium
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#264