fix: prevent long container names from overflowing card #496

2026-01-12T06:44:32Z

ZacharyZcR commented

2026-01-12 06:44:32 +00:00

(Migrated from github.com)

Summary

Adds min-w-0 to container name CardTitle to enable proper text truncation

Root Cause

In flexbox, child elements have min-width: auto by default, which prevents them from shrinking below their content width. The existing truncate class was ineffective because the element couldn't shrink.

Changes

- <CardTitle className="text-base font-semibold truncate flex-1">
+ <CardTitle className="text-base font-semibold truncate flex-1 min-w-0">

Test plan

Create a Docker container with a long name (>36 chars)
Verify the name is truncated with ellipsis instead of overflowing

Fixes Termix-SSH/Support#411

## Summary - Adds `min-w-0` to container name CardTitle to enable proper text truncation ## Root Cause In flexbox, child elements have `min-width: auto` by default, which prevents them from shrinking below their content width. The existing `truncate` class was ineffective because the element couldn't shrink. ## Changes ```diff - <CardTitle className="text-base font-semibold truncate flex-1"> + <CardTitle className="text-base font-semibold truncate flex-1 min-w-0"> ``` ## Test plan - [ ] Create a Docker container with a long name (>36 chars) - [ ] Verify the name is truncated with ellipsis instead of overflowing Fixes Termix-SSH/Support#411

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dennii/Termix#496