info-tile: a prefix overlaps the label when the tile has no value

[Kiarokh]

Current behavior

When a limel-info-tile is given a prefix but no value, the prefix renders on top of the label.

.value-group is a flex column. renderValue and renderSuffix return nothing when value and suffix are empty, so .value-and-suffix collapses to zero height. .prefix then applies transform: translateY(40%) relative to that collapsed row, which pushes it down over .label.

This makes prefix effectively unusable on a value-less tile for every consumer. A tile that reports a state rather than a number — "Forecast unavailable", "No data yet" — is a reasonable thing to render, and supplying a prefix alongside it silently produces overlapping text rather than either working or being ignored.

Steps to reproduce the behavior:

1. Render a tile with a prefix and a label but no value: <limel-info-tile prefix="Stockholm" label="Forecast unavailable" icon="no_connection" />
2. The prefix overlaps the label.

Relevant source: .prefix { transform: translateY(40%) } in src/components/info-tile/info-tile.scss (around line 234), against the early returns in renderValue / renderSuffix in src/components/info-tile/info-tile.tsx.

Expected behavior

A prefix should sit above the label and never overlap it, whether or not the tile has a value. Either reserve the value row's height so the prefix has something to be offset against, or skip the translateY(40%) when there is no value.

Environment

• lime-elements version: 40.1.0
• Framework used: n/a — reproduces in the component's own docs
• Logs: none, the failure is purely visual

_{Found while reviewing #4280, which worked around this in example code by only supplying a prefix when a value was on its way. Filing so the workaround can be dropped and the next consumer does not have to rediscover it.}