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

New Issue

2026-09-27T23:06:52-04:00

jared commented

2026-09-27 23:06:52 -04:00

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:

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.
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.
Radio and checkbox indicators are almost invisible. The unselected border uses Primary.ContainerLine, faint in light theme and nearly gone in dark.
Two identical check marks on a winning row (your vote and the winner). The winner has no other marker.
Heavy, detached header: "◉ POLL · SINGLE CHOICE" in letter-spaced uppercase with a stray glyph.
Footer breaks: small italic text, and "End poll" wraps onto two lines ("End / poll") when the note is long, e.g. on undisclosed polls.
No card: question, options and footer float in the timeline with nothing grouping them.
Fixed maxWidth: 340px: cramped for long questions and answers, wasted space on desktop.
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

jared added the bug priority: medium ux labels 2026-09-27 23:06:52 -04:00

jared commented

2026-09-27 23:06:53 -04:00

Before:

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 referenced this issue from a commit

2026-09-27 23:18:31 -04:00

fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246)

jared referenced this issue

2026-09-27 23:18:48 -04:00

Polls: readable poll card: counts, visible bars/indicators, no chip overflow (#246) #247

jared commented

2026-09-27 23:18:49 -04:00

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 referenced this issue from a commit

2026-09-27 23:28:49 -04:00

Merge pull request #247: readable poll card (#246)

jared commented

2026-09-27 23:31:10 -04:00

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.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/cinny#246