bullitt/trackbox

Fork 0

Dashboard: Truncated card titles should wrap to 2 lines instead of clipping #23

New issue

Closed

opened 2026-06-27 15:41:14 +02:00 by bullitt · 1 comment

bullitt commented

2026-06-27 15:41:14 +02:00

Owner

Problem

Shipment card titles use truncate (CSS overflow: hidden; text-overflow: ellipsis; white-space: nowrap), which clips long names like "Harder Global Network GmbH Michael Harder" to "Harder..." even though there is vertical room in the card to show more. Information is lost unnecessarily.

Implementation

File: frontend/src/pages/Dashboard.tsx — ShipmentCard component, line ~53.

Change:

<p className="font-semibold truncate">

To:

<p className="font-semibold line-clamp-2 leading-tight">

line-clamp-2 (Tailwind utility for -webkit-line-clamp: 2) allows up to two lines before ellipsing, which fits within the existing card height. The leading-tight prevents the card from growing excessively on two-line titles.

Acceptance criteria

Long titles wrap to a second line rather than being cut after ~15 characters
Cards with short titles are unaffected
Grid alignment remains consistent (cards are self-sizing, not fixed height)

Brand identity alignment

Shipment cards are the core brand object and should read like structured parcel labels. The human-readable shipment name is priority #1 in the brief, so clipping it to a single truncated line undermines the intended hierarchy.

Brand-compliant implementation notes

Use a two-line title area with stable spacing so long names remain readable without pushing metadata into an uneven layout.
Keep tracking IDs in monospace and secondary; the shipment name should remain the primary scan target.
Do not compensate with larger typography or marketing-style card spacing. Keep the card dense, calm, and operational.

Additional acceptance criteria

Long titles remain readable as the primary card label.
Tracking number, carrier, status, and last update remain visually secondary.
The card still feels like a neutral parcel-status label, not an ecommerce product card.

Migrated from GitHub issue #2: https://github.com/bullitt186/trackbox/issues/2
Original author: @bullitt186
Original created: 2026-06-27T13:22:07Z
Original labels: ux

## Problem Shipment card titles use `truncate` (CSS `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`), which clips long names like "Harder Global Network GmbH Michael Harder" to "Harder..." even though there is vertical room in the card to show more. Information is lost unnecessarily. ## Implementation File: `frontend/src/pages/Dashboard.tsx` — `ShipmentCard` component, line ~53. Change: ```tsx <p className="font-semibold truncate"> ``` To: ```tsx <p className="font-semibold line-clamp-2 leading-tight"> ``` `line-clamp-2` (Tailwind utility for `-webkit-line-clamp: 2`) allows up to two lines before ellipsing, which fits within the existing card height. The `leading-tight` prevents the card from growing excessively on two-line titles. ## Acceptance criteria - Long titles wrap to a second line rather than being cut after ~15 characters - Cards with short titles are unaffected - Grid alignment remains consistent (cards are self-sizing, not fixed height) ## Brand identity alignment Shipment cards are the core brand object and should read like structured parcel labels. The human-readable shipment name is priority #1 in the brief, so clipping it to a single truncated line undermines the intended hierarchy. ## Brand-compliant implementation notes - Use a two-line title area with stable spacing so long names remain readable without pushing metadata into an uneven layout. - Keep tracking IDs in monospace and secondary; the shipment name should remain the primary scan target. - Do not compensate with larger typography or marketing-style card spacing. Keep the card dense, calm, and operational. ## Additional acceptance criteria - Long titles remain readable as the primary card label. - Tracking number, carrier, status, and last update remain visually secondary. - The card still feels like a neutral parcel-status label, not an ecommerce product card. --- Migrated from GitHub issue #2: https://github.com/bullitt186/trackbox/issues/2 Original author: @bullitt186 Original created: 2026-06-27T13:22:07Z Original labels: ux

bullitt added the

label

2026-06-27 15:41:14 +02:00

bullitt referenced this issue

2026-06-27 15:41:16 +02:00

Global: Move carrier icon attribution into the app shell footer #44

bullitt commented

2026-06-27 16:02:04 +02:00

Author

Owner

Implemented in commit bd6b0e7. Changed the card title from truncate to line-clamp-2 leading-tight. Long shipment names now wrap to two lines before ellipsing, keeping the primary identifier readable. Short names are unaffected. Card spacing adjusts naturally via the existing flexbox layout.

Implemented in commit bd6b0e7. Changed the card title from `truncate` to `line-clamp-2 leading-tight`. Long shipment names now wrap to two lines before ellipsing, keeping the primary identifier readable. Short names are unaffected. Card spacing adjusts naturally via the existing flexbox layout.

bullitt closed this issue

2026-06-27 16:02:04 +02:00

No labels

arch

harness

security

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

bullitt/trackbox#23

No description provided.

Rows
Columns