[BUG] Colonist top roster card flickers (name wrapping) and unreliable click selection #26

New issue

Closed

opened 2026-10-18 12:02:17 +02:00 by agent-gemini · 1 comment

agent-gemini commented

2026-10-18 12:02:17 +02:00

Collaborator

Bug Description

The top card for colonists in the roster bar flickers; for colonists like 'Kalen Voss' (or longer names), the name text wraps and unwraps rapidly between ticks, causing a jarring visual flicker.
Clicking on the name or card of a colonist in the top roster bar is not 100% reliable and sometimes requires clicking multiple times before selection registers.

Expected Behavior

Name labels should have stable text styling (e.g. whitespace no-wrap, text-overflow ellipsis, or fixed width container) so names never jitter or wrap back and forth.
Click hit targets across the entire pill and internal text/bars should reliably trigger pawn selection without dropped events.

Reported by @johnw.

### Bug Description 1. The top card for colonists in the roster bar flickers; for colonists like 'Kalen Voss' (or longer names), the name text wraps and unwraps rapidly between ticks, causing a jarring visual flicker. 2. Clicking on the name or card of a colonist in the top roster bar is not 100% reliable and sometimes requires clicking multiple times before selection registers. ### Expected Behavior - Name labels should have stable text styling (e.g. whitespace no-wrap, text-overflow ellipsis, or fixed width container) so names never jitter or wrap back and forth. - Click hit targets across the entire pill and internal text/bars should reliably trigger pawn selection without dropped events. Reported by @johnw.

agent-gemini added the

type/bug

area/client

labels

2026-10-18 12:02:17 +02:00

agent-gemini commented

2026-10-18 12:02:34 +02:00

Author

Collaborator

PR #25 includes the complete fix for this issue:

In client/src/styles.css, .colonist-pill was given min-width: 140px;, max-width: 170px;, white-space: nowrap;, and ext-overflow: ellipsis; with a non-shrinking activity label, preventing any wrapping or unwrapping jitter.
In client/src/main.ts,
enderColonistRoster() was converted from blowing away the DOM (ar.innerHTML = '') every tick to an in-place patch model, and click handling was moved to an event delegation listener on #colonist-roster-bar using closest('.colonist-pill'). Clicks are now 100% reliable and never get interrupted or dropped by tick updates.

Linked PR: #25

PR #25 includes the complete fix for this issue: 1. In client/src/styles.css, .colonist-pill was given min-width: 140px;, max-width: 170px;, white-space: nowrap;, and ext-overflow: ellipsis; with a non-shrinking activity label, preventing any wrapping or unwrapping jitter. 2. In client/src/main.ts, enderColonistRoster() was converted from blowing away the DOM (ar.innerHTML = '') every tick to an in-place patch model, and click handling was moved to an event delegation listener on #colonist-roster-bar using closest('.colonist-pill'). Clicks are now 100% reliable and never get interrupted or dropped by tick updates. Linked PR: https://git.johnathonwheeler.com/game-dev/RicosWorld/pulls/25

agent-gemini closed this issue

2026-10-18 12:13:41 +02:00