diff --git a/client/src/components/Collab/CollabPollOption.tsx b/client/src/components/Collab/CollabPollOption.tsx
index a7e17a207..1bce48c7a 100644
--- a/client/src/components/Collab/CollabPollOption.tsx
+++ b/client/src/components/Collab/CollabPollOption.tsx
@@ -38,6 +38,20 @@ function VoterChip({ name, src, offset }: { name: string; src: string | null; of
);
}
+/** The voters past the third, as a count on the end of the stack; their names on hover. */
+function MoreVoters({ names }: { names: string[] }) {
+ return (
+ name || '?').join(', ')}>
+
+ +{names.length}
+
+
+ );
+}
+
/** A fact about the poll on its head band, set like the type chip on a booking card. */
export function PollChip({
icon,
@@ -138,6 +152,7 @@ export function PollOptionRow({
{voters.slice(0, 3).map((voter, index) => (
0} />
))}
+ {voters.length > 3 && voter.name)} />}
)}
{pending && {pending.label}}
diff --git a/client/src/components/Collab/CollabPolls.test.tsx b/client/src/components/Collab/CollabPolls.test.tsx
index 537ca4e4f..03cc4e962 100644
--- a/client/src/components/Collab/CollabPolls.test.tsx
+++ b/client/src/components/Collab/CollabPolls.test.tsx
@@ -191,6 +191,18 @@ describe('CollabPolls', () => {
expect(await screen.findByText(/closed/i)).toBeInTheDocument();
});
+ it('FE-COMP-POLLS-025: past three voters the stack ends in a count of the rest', async () => {
+ const voters = ['anna', 'ben', 'cleo', 'dana', 'emil'].map((username, i) => ({ user_id: 10 + i, username, avatar_url: null }));
+ server.use(
+ http.get('/api/trips/1/collab/polls', () =>
+ HttpResponse.json({ polls: [buildPoll({ is_closed: true, options: [{ id: 1, text: 'Paris', label: 'Paris', voters }, { id: 2, text: 'Rome', label: 'Rome', voters: [] }] })] }),
+ ),
+ );
+ render();
+ expect(await screen.findByText('+2')).toBeInTheDocument();
+ expect(screen.queryByText('D')).not.toBeInTheDocument();
+ });
+
it('FE-COMP-POLLS-011: closed poll options are disabled (cannot vote)', async () => {
server.use(
http.get('/api/trips/1/collab/polls', () =>