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

Polls: timeline rendering is hard to read (percentages, bars, indicators, layout) #246

New Issue
Closed
opened 2026-09-27 23:06:52 -04:00 by jared · 3 comments
jared commented 2026-09-27 23:06:52 -04:00
Owner
Copy Link
Copy Source

Polls look broken in the timeline

Reported by the owner ("polls look horrible"). I rendered every poll state against a local Synapse in light theme, dark theme and at phone width (412 px). Findings, most visible first:

  1. Multiple-choice percentages look wrong. One voter picked 2 of 4 games, and the rows read 100% / 100%. Percent-of-voters is technically right for multi-select, but there are no vote counts anywhere, so it reads as a bug.
  2. Result bars are barely visible. The bar fills the whole row in a grey almost identical to the row itself. A 100% row just looks disabled or pressed, and in dark mode the selected purple swallows the bar.
  3. Radio and checkbox indicators are almost invisible. The unselected border uses Primary.ContainerLine, faint in light theme and nearly gone in dark.
  4. Two identical check marks on a winning row (your vote and the winner). The winner has no other marker.
  5. Heavy, detached header: "◉ POLL · SINGLE CHOICE" in letter-spaced uppercase with a stray glyph.
  6. Footer breaks: small italic text, and "End poll" wraps onto two lines ("End / poll") when the note is long, e.g. on undisclosed polls.
  7. No card: question, options and footer float in the timeline with nothing grouping them.
  8. Fixed maxWidth: 340px: cramped for long questions and answers, wasted space on desktop.
  9. The footer says "N votes" for multiple choice, where it's really N voters.

The creator dialog is fine and is out of scope.

Plan

Redesign PollContent, keeping the vote logic (tally, optimistic vote, end poll, keyboard radiogroup, voters) unchanged:

  • A bordered card, min(100%, 460px) wide.
  • Header: the poll icon, "Poll", and the type as muted text ("Single choice", "Pick up to 2", "Results hidden until the end"). "Final results" once ended.
  • Rows: a clearly visible radio/checkbox, the answer text, and on the right N votes · P%. A thin progress bar sits under each answer: accent for your pick, success colour for the winner, neutral for the rest.
  • Winner: a star plus "Winner", not a second check mark.
  • Footer: normal (non-italic) muted text that wraps, "voters" for multiple choice, and an End poll chip that never wraps.
  • Check light, dark and phone widths, keyboard use and screen-reader labels.
## Polls look broken in the timeline Reported by the owner ("polls look horrible"). I rendered every poll state against a local Synapse in light theme, dark theme and at phone width (412 px). Findings, most visible first: 1. **Multiple-choice percentages look wrong.** One voter picked 2 of 4 games, and the rows read **100% / 100%**. Percent-of-voters is technically right for multi-select, but there are no vote counts anywhere, so it reads as a bug. 2. **Result bars are barely visible.** The bar fills the whole row in a grey almost identical to the row itself. A 100% row just looks disabled or pressed, and in dark mode the selected purple swallows the bar. 3. **Radio and checkbox indicators are almost invisible.** The unselected border uses `Primary.ContainerLine`, faint in light theme and nearly gone in dark. 4. **Two identical check marks on a winning row** (your vote and the winner). The winner has no other marker. 5. **Heavy, detached header:** "◉ POLL · SINGLE CHOICE" in letter-spaced uppercase with a stray glyph. 6. **Footer breaks:** small italic text, and **"End poll" wraps onto two lines** ("End / poll") when the note is long, e.g. on undisclosed polls. 7. **No card:** question, options and footer float in the timeline with nothing grouping them. 8. **Fixed `maxWidth: 340px`:** cramped for long questions and answers, wasted space on desktop. 9. The footer says "N votes" for multiple choice, where it's really N **voters**. The creator dialog is fine and is out of scope. ## Plan Redesign `PollContent`, keeping the vote logic (tally, optimistic vote, end poll, keyboard radiogroup, voters) unchanged: - A bordered card, `min(100%, 460px)` wide. - Header: the poll icon, "Poll", and the type as muted text ("Single choice", "Pick up to 2", "Results hidden until the end"). "Final results" once ended. - Rows: a clearly visible radio/checkbox, the answer text, and on the right **`N votes · P%`**. A thin progress bar sits under each answer: accent for your pick, success colour for the winner, neutral for the rest. - Winner: a star plus "Winner", not a second check mark. - Footer: normal (non-italic) muted text that wraps, "voters" for multiple choice, and an End poll chip that never wraps. - Check light, dark and phone widths, keyboard use and screen-reader labels.
before-multi-dark.png
23 KiB
before-long-light.png
60 KiB
before-ended-dark.png
19 KiB
before-footer-wrap.png
22 KiB
poll-after-dark-2.png
26 KiB
poll-after-light-4.png
21 KiB
poll-after-light-1.png
25 KiB
poll-after-phone-5.png
69 KiB
poll-stress-before-terminal-desktop-150.png
20 KiB
poll-stress-after-terminal-desktop-150.png
19 KiB
poll-func-ended.png
16 KiB
before-multi-dark.png before-long-light.png before-ended-dark.png before-footer-wrap.png poll-after-dark-2.png poll-after-light-4.png poll-after-light-1.png poll-after-phone-5.png poll-stress-before-terminal-desktop-150.png poll-stress-after-terminal-desktop-150.png poll-func-ended.png
jared added the bugpriority: mediumux labels 2026-09-27 23:06:52 -04:00
jared commented 2026-09-27 23:06:53 -04:00
Author
Owner
Copy Link
Copy Source

Before:

before-multi-dark.png
before-long-light.png
before-ended-dark.png
before-footer-wrap.png

Before: ![before-multi-dark.png](https://code.lotusguild.org/attachments/7233d84f-bdca-4026-9f19-23f891105bac) ![before-long-light.png](https://code.lotusguild.org/attachments/865057e4-3377-4985-ad9c-5b5da8f70fd4) ![before-ended-dark.png](https://code.lotusguild.org/attachments/8aef33e2-a563-4ade-aa70-fe697890252a) ![before-footer-wrap.png](https://code.lotusguild.org/attachments/4628e01a-b0b2-4c8e-a7e3-4ae61ff045bc)
jared commented 2026-09-27 23:18:49 -04:00
Author
Owner
Copy Link
Copy Source

Fix in PR #247. The owner's "End poll text goes out of bounds of the button" is the same bug as the two-line chip in the before shots: the label wraps inside a one-line chip. It's reproduced in the Lotus Terminal theme at 150% zoom, on a 360 px phone and in dark at 125%, and fixed in all three (details in the PR).

Fix in PR #247. The owner's "End poll text goes out of bounds of the button" is the same bug as the two-line chip in the before shots: the label wraps inside a one-line chip. It's reproduced in the Lotus Terminal theme at 150% zoom, on a 360 px phone and in dark at 125%, and fixed in all three (details in the PR).
jared commented 2026-09-27 23:31:10 -04:00
Author
Owner
Copy Link
Copy Source

Shipped in PR #247 (be8e49a2), live on chat.lotusguild.org. CI was green and the production app boots with no errors. The desktop app gets it with the nightly catch-up. If the End poll chip (or anything else in a poll) still looks off on your setup, reopen this with the theme, zoom level and window width.

Shipped in PR #247 (`be8e49a2`), live on chat.lotusguild.org. CI was green and the production app boots with no errors. The desktop app gets it with the nightly catch-up. If the End poll chip (or anything else in a poll) still looks off on your setup, reopen this with the theme, zoom level and window width.
jared closed this issue 2026-09-27 23:31: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 bug priority: medium ux
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#246