Reactions: "+N" overflow expands inline (check every layout/edge case first) #138

Closed
opened 2026-09-17 16:26:17 -04:00 by jared · 1 comment
Owner

Verify current behaviour: many distinct reactions on a phone-width message — do they wrap into a tall stack, overflow, or clip?

Scope

  • Show at most one wrapped row of reactions plus a "+N" chip; tap expands inline (no popover) and a "less" chip collapses. Persist expanded state per message for the session only.
  • Cases to test explicitly: bubble vs modern vs compact layouts; message with reply + reactions; thread panel; search results (reactions hidden there?); RTL; screen readers (aria-expanded); the who-reacted hover/right-click viewer must still work on every chip; own-reaction highlight; Lotus Terminal theme.
  • No change when reactions fit in one row.
Verify current behaviour: many distinct reactions on a phone-width message — do they wrap into a tall stack, overflow, or clip? ### Scope - Show at most one wrapped row of reactions plus a **"+N"** chip; tap expands inline (no popover) and a **"less"** chip collapses. Persist expanded state per message for the session only. - Cases to test explicitly: bubble vs modern vs compact layouts; message with reply + reactions; thread panel; search results (reactions hidden there?); RTL; screen readers (aria-expanded); the who-reacted hover/right-click viewer must still work on every chip; own-reaction highlight; Lotus Terminal theme. - No change when reactions fit in one row.
jared added this to the Features 2026-Q4 milestone 2026-09-17 16:26:17 -04:00
jared added the enhancementpriority: lowuxarea: messagingarea: mobile labels 2026-09-17 16:26:17 -04:00
jared self-assigned this 2026-09-17 16:26:17 -04:00
Author
Owner

Done in bf05751e.

Verified current behaviour first: 16 distinct reactions at 400 px wrapped into a 4-row stack (no clipping/overflow, just tall).

before

Now: one row + +N; tap expands inline, less collapses; state remembered per message for the session (survives in-app navigation, not reload). No change when the chips fit in one row.

case result
modern, phone 4 chips + +12 → expanded 16 + less → collapsed 4
modern, desktop 10 chips + +6
bubble, phone 4 + +12; shrink-to-fit bubble stays stable (hidden chips keep the container's natural width)
compact, phone 2 + +14 (content column is narrower there)
thread panel (desktop) 4 + +8
RTL works; +N forced dir=ltr so it doesn't render as 12+
a11y +N = aria-expanded=false / "Show N more reactions"; less = aria-expanded=true; hidden chips aria-hidden + tabindex=-1
who-reacted hover tooltip and right-click viewer still work on visible chips; own-reaction highlight unchanged (same Reaction component)
search results reactions aren't rendered there (unchanged)

Message with reply + reactions and Lotus Terminal theme use the same container; the +N chip uses SurfaceVariant tokens so it follows the theme.

after expanded
bubble compact
thread
desktop

Done in bf05751e. **Verified current behaviour first:** 16 distinct reactions at 400 px wrapped into a 4-row stack (no clipping/overflow, just tall). ![before](https://code.lotusguild.org/attachments/ca16a076-49b0-477b-9cb6-f34ed836d078) **Now:** one row + `+N`; tap expands inline, `less` collapses; state remembered per message for the session (survives in-app navigation, not reload). No change when the chips fit in one row. | case | result | |---|---| | modern, phone | 4 chips + `+12` → expanded 16 + `less` → collapsed 4 | | modern, desktop | 10 chips + `+6` | | bubble, phone | 4 + `+12`; shrink-to-fit bubble stays stable (hidden chips keep the container's natural width) | | compact, phone | 2 + `+14` (content column is narrower there) | | thread panel (desktop) | 4 + `+8` | | RTL | works; `+N` forced `dir=ltr` so it doesn't render as `12+` | | a11y | `+N` = `aria-expanded=false` / "Show N more reactions"; `less` = `aria-expanded=true`; hidden chips `aria-hidden` + `tabindex=-1` | | who-reacted | hover tooltip and right-click viewer still work on visible chips; own-reaction highlight unchanged (same `Reaction` component) | | search results | reactions aren't rendered there (unchanged) | Message with reply + reactions and Lotus Terminal theme use the same container; the `+N` chip uses SurfaceVariant tokens so it follows the theme. ![after](https://code.lotusguild.org/attachments/e6486cee-98c8-4b39-8493-3bdea3aa8ab2) ![expanded](https://code.lotusguild.org/attachments/0a50cc9c-b4d9-48b4-a793-fa744c9e21ba) ![bubble](https://code.lotusguild.org/attachments/31a8dccb-dc40-4ebe-9a60-3207c68114d5) ![compact](https://code.lotusguild.org/attachments/258a667a-fc67-4c25-b38b-ad17b945a1ee) ![thread](https://code.lotusguild.org/attachments/2e10c81e-af19-408a-ab18-b7ab91fe10ac) ![desktop](https://code.lotusguild.org/attachments/aed60b34-879e-40ae-85c4-b123845cb40c)
jared closed this issue 2026-09-19 23:55:11 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#138