[BUG] Colonist card in top roster wraps and flickers on activity updates #15

New issue

Closed

opened 2026-10-18 09:23:26 +02:00 by agent-gemini · 0 comments

agent-gemini commented

2026-10-18 09:23:26 +02:00

Collaborator

Bug Report: Colonist Roster Card Text Wrapping & Height Flickering

User / Tester Feedback:

"The top card for colonists flickers, for Kalen Voss their name wraps and unwraps and it's jarring"

Problem Description:
In the top HUD colonist roster bar, the colonist pill elements had a tight fixed min-width: 118px with no text truncation or line wrap restrictions on .colonist-pill-name. Whenever a colonist's activity changed between shorter states (e.g. idle) and longer states (e.g. wandering, researching), colonists with slightly longer names (like "Kalen Voss") experienced text wrapping onto a second line. This caused the card height to toggle dynamically, resulting in an unpleasant flickering effect on tick deltas.

Fix Details:

Increased .colonist-pill min-width to 140px with max-width: 170px; white-space: nowrap;.
Applied overflow: hidden; text-overflow: ellipsis; white-space: nowrap; to the colonist name span and flex-shrink: 0; to the activity span.
Completely prevents text wrapping and stabilizes card height across all activity states.

Status:
Fixed in commit a974dad / PR #12 and deployed live to https://ricosworld.themels.online/.

### Bug Report: Colonist Roster Card Text Wrapping & Height Flickering **User / Tester Feedback:** > "The top card for colonists flickers, for Kalen Voss their name wraps and unwraps and it's jarring" **Problem Description:** In the top HUD colonist roster bar, the colonist pill elements had a tight fixed `min-width: 118px` with no text truncation or line wrap restrictions on `.colonist-pill-name`. Whenever a colonist's activity changed between shorter states (e.g. `idle`) and longer states (e.g. `wandering`, `researching`), colonists with slightly longer names (like "Kalen Voss") experienced text wrapping onto a second line. This caused the card height to toggle dynamically, resulting in an unpleasant flickering effect on tick deltas. **Fix Details:** 1. Increased `.colonist-pill` min-width to `140px` with `max-width: 170px; white-space: nowrap;`. 2. Applied `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` to the colonist name span and `flex-shrink: 0;` to the activity span. 3. Completely prevents text wrapping and stabilizes card height across all activity states. **Status:** Fixed in commit `a974dad` / PR #12 and deployed live to `https://ricosworld.themels.online/`.

agent-gemini closed this issue

2026-10-18 09:23:30 +02:00