[web] Resources detail: Cost field label overlaps its value (verbose label in fixed-width column) #29

New issue

Closed

opened 2026-06-15 09:21:11 +00:00 by sameh-farouk · 1 comment

sameh-farouk commented

2026-06-15 09:21:11 +00:00

Member

Symptom

In the Resources detail view (web UI), the Cost field's label overlaps its value — the label renders as "COST (E.G. 10K USD/MONTH OR …)" and runs over the "0.00 EUR" value (screenshot below).

Root cause

The resource cost field's label was set to the verbose 'Cost (e.g. 10k USD, 5000 EUR)' (crates/hero_planner_web/src/index.html:750). The detail view renders the field label in a fixed 110px grid column with white-space:nowrap (.detail-field-label, lines 41–43), so the long label overflows the column and overlaps the value.

The verbose text is a form hint mis-used as the label — and it's redundant: the money-type input already shows its own placeholder ("e.g. 10k or 5000"), and the other money fields use short labels ("Amount").

Fix

Shorten the label to 'Cost' (line 750). It fits the 110px column (no overlap); the form still hints the format via the money input's existing placeholder.

Screenshot (before)

## Symptom In the **Resources** detail view (web UI), the **Cost** field's label overlaps its value — the label renders as "COST (E.G. 10K USD/MONTH OR …)" and runs over the "0.00 EUR" value (screenshot below). ## Root cause The resource `cost` field's `label` was set to the verbose `'Cost (e.g. 10k USD, 5000 EUR)'` (`crates/hero_planner_web/src/index.html:750`). The detail view renders the field label in a fixed **110px** grid column with `white-space:nowrap` (`.detail-field-label`, lines 41–43), so the long label overflows the column and overlaps the value. The verbose text is a form *hint* mis-used as the *label* — and it's redundant: the `money`-type input already shows its own placeholder ("e.g. 10k or 5000"), and the other money fields use short labels ("Amount"). ## Fix Shorten the label to `'Cost'` (line 750). It fits the 110px column (no overlap); the form still hints the format via the money input's existing placeholder. ## Screenshot (before) ![cost overlap](https://forge.ourworld.tf/attachments/a6b7e716-90d8-418f-964a-7f0317b4c05f)

cost-overlap-before.png

79 KiB

cost-fixed-after.png

41 KiB

sameh-farouk self-assigned this

2026-06-15 09:21:11 +00:00

sameh-farouk commented

2026-06-15 09:22:17 +00:00

Author

Member

Fixed on development (squash). Shortened the resource cost field label from 'Cost (e.g. 10k USD, 5000 EUR)' to 'Cost' (index.html:750) — the detail view's fixed 110px nowrap label column was overflowing into the value. The format hint is preserved by the money input's existing placeholder ("e.g. 10k or 5000").

Browser-verified: the COST row now renders Cost 0.00 EUR with no overlap (bounding-box check: label.right < value.left for all detail rows).

Screenshot (after)

Fixed on `development` (squash). Shortened the resource `cost` field label from `'Cost (e.g. 10k USD, 5000 EUR)'` to `'Cost'` (`index.html:750`) — the detail view's fixed 110px nowrap label column was overflowing into the value. The format hint is preserved by the money input's existing placeholder ("e.g. 10k or 5000"). Browser-verified: the COST row now renders `Cost 0.00 EUR` with no overlap (bounding-box check: label.right < value.left for all detail rows). ## Screenshot (after) ![cost fixed](https://forge.ourworld.tf/attachments/4d253ccf-d630-4fd5-8c96-05d11fed3251)

sameh-farouk closed this issue

2026-06-15 09:22:17 +00:00

sameh-farouk referenced this issue from a commit

2026-06-15 09:22:17 +00:00

fix(web): shorten resource cost field label to fix detail-view overlap (#29)