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

Merged
jared merged 1 commits from poll-ui into lotus 2026-09-27 23:28:48 -04:00
Owner

Fixes #246: polls were hard to read in the timeline. This changes rendering only; the vote logic is unchanged.

What changes

  • Counts on every row: N votes · P%. Multiple choice no longer reads as a broken "100% / 100%", and its footer says voters.
  • Visible results: a thin progress bar under each answer. Accent colour for your pick, success colour for the winner, neutral for the rest.
  • Visible radio/checkbox indicators (18 px, 2 px border in a colour mixed from the theme's text colour). They were nearly invisible, especially in dark themes.
  • Winner: "★ Winner" instead of a second check mark.
  • A card, 460 px wide (max 100%), the same width for every poll.
  • Header: "Poll · Single choice / Pick up to N / Results hidden until the end / Final results" replaces the letter-spaced "◉ POLL · …" line.
  • Footer: plain text that wraps, and chips that never wrap. Before, "End poll" broke onto two lines inside a one-line chip and spilled out of it, as the owner saw.
  • Lotus Terminal theme: a green border for the winner.

Evidence

The "End poll" overflow, reproduced and fixed. Stress test with the Lotus Terminal theme at 150% zoom, a 360 px phone, and dark at 125%, measuring the label's box against the chip's:

  • before: the label is 2 lines and overflows (3 of 3 setups)
  • after: 1 line, no overflow (all setups).
before after

Behaviour (local Synapse, Playwright):

  • changing a single-choice vote works
  • the multiple-choice limit is enforced (the 3rd pick of max 2 is refused)
  • Arrow Down moves the vote
  • "Who voted" lists voters
  • ending a secret ballot reveals results with the winner marked
  • screen-reader labels include the count and percentage.

Checks: 1,271 unit tests, Playwright e2e 20/20, tsc and eslint clean, build clean.

multiple choice, dark
ended, light
single choice
phone, long text
ended secret ballot

🤖 Generated with Claude Code

https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

Fixes **#246**: polls were hard to read in the timeline. This changes rendering only; the vote logic is unchanged. ## What changes - **Counts on every row:** `N votes · P%`. Multiple choice no longer reads as a broken "100% / 100%", and its footer says **voters**. - **Visible results:** a thin progress bar under each answer. Accent colour for your pick, success colour for the winner, neutral for the rest. - **Visible radio/checkbox indicators** (18 px, 2 px border in a colour mixed from the theme's text colour). They were nearly invisible, especially in dark themes. - **Winner:** "★ Winner" instead of a second check mark. - **A card,** 460 px wide (max 100%), the same width for every poll. - **Header:** "Poll · Single choice / Pick up to N / Results hidden until the end / Final results" replaces the letter-spaced "◉ POLL · …" line. - **Footer:** plain text that wraps, and **chips that never wrap**. Before, "End poll" broke onto two lines inside a one-line chip and spilled out of it, as the owner saw. - **Lotus Terminal theme:** a green border for the winner. ## Evidence **The "End poll" overflow, reproduced and fixed.** Stress test with the Lotus Terminal theme at 150% zoom, a 360 px phone, and dark at 125%, measuring the label's box against the chip's: - **before:** the label is 2 lines and overflows (3 of 3 setups) - **after:** 1 line, no overflow (all setups). | before | after | |---|---| | ![](https://code.lotusguild.org/attachments/9e513fa1-9c1f-4b6b-b0a3-927a5e76d3bb) | ![](https://code.lotusguild.org/attachments/30f2185b-06de-4937-a437-d12f14ee8884) | **Behaviour** (local Synapse, Playwright): - changing a single-choice vote works - the multiple-choice limit is enforced (the 3rd pick of max 2 is refused) - Arrow Down moves the vote - "Who voted" lists voters - ending a secret ballot reveals results with the winner marked - screen-reader labels include the count and percentage. **Checks:** 1,271 unit tests, Playwright e2e 20/20, tsc and eslint clean, build clean. ![multiple choice, dark](https://code.lotusguild.org/attachments/fc016651-0cbb-42b7-8b22-307ee9d59ca1) ![ended, light](https://code.lotusguild.org/attachments/cc3beba4-cfaf-4e43-a659-66372a8459dd) ![single choice](https://code.lotusguild.org/attachments/e05994eb-560f-4159-a629-8ee93568947c) ![phone, long text](https://code.lotusguild.org/attachments/98f5b28b-22b4-4537-8f3c-73820b3c5c0e) ![ended secret ballot](https://code.lotusguild.org/attachments/3aaf1de1-616b-4773-b4eb-6a8831488f4d) 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
jared added 1 commit 2026-09-27 23:18:48 -04:00
fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246)
CI / Build & Quality Checks (pull_request) Successful in 1m35s
CI / Trigger Desktop Build (pull_request) Skipped
CI / Docker image build & smoke test (pull_request) Skipped
CI / Secret scan (gitleaks) (pull_request) Successful in 6s
CI / Playwright smoke (e2e) (pull_request) Successful in 7m55s
1e217592fc
Rendering only; the vote logic (tally, optimistic votes, end poll, keyboard
radiogroup, voters) is unchanged.

- Every row shows "N votes · P%". Multiple choice looked broken as
  "100% / 100%" with no counts; the footer now says "voters" there.
- Results are a thin progress bar under each answer: accent for your pick,
  success for the winner, neutral otherwise. The old full-row fill was the
  same grey as the row, so a 100% answer just looked disabled.
- Radio and checkbox indicators are 18px with a 2px border in a colour mixed
  from the theme's text colour. Primary.ContainerLine was nearly invisible,
  especially in dark themes.
- The winner shows a star and "Winner" instead of a second check mark.
- Bordered card, 460px wide (max 100%, same width for every poll). The header
  is now "Poll · Single choice | Pick up to N | Results hidden until the end |
  Final results", replacing the letter-spaced "◉ POLL · …" line.
- Footer: plain muted text that wraps, and chips ("Who voted", "End poll")
  that never wrap. Previously the chip label broke onto two lines inside a
  one-line chip and spilled out of it. Reproduced before/after in Lotus
  Terminal at 150% zoom, a 360px phone, and dark at 125%.
- Lotus Terminal theme: data-winner gets its own green border rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
jared merged commit be8e49a2bb into lotus 2026-09-27 23:28:48 -04:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#247