mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 06:40:50 +00:00
Marc-André Bombeck
debd44a75b
Recharts word-wraps a tick label that it measures wider than its axis, and it measures in the page's body font rather than the tick's 11 px. "62 bpm" on the pulse chart under a workout and "106 mg/dL" on the glucose page therefore broke onto two lines at every width, and the pulse chart's second line sat on the first x tick. Axis units are now joined with a no-break space through `axisUnitSuffix`, so the label is one word and stays on one line. A guard fails when a chart axis joins a unit with a plain space. The calendar and clock buttons in the date and time fields paint at 32 px; a `::before` halo now gives them a 44 px touch target without changing the field.
16 lines
643 B
TypeScript
16 lines
643 B
TypeScript
/**
|
||
* The unit suffix a chart axis appends to each tick value ("62 bpm").
|
||
*
|
||
* Joined with a no-break space, never a plain one. Recharts word-wraps a
|
||
* tick label that is wider than the axis, and it measures the label in the
|
||
* page's body font rather than the tick's own 11 px, so "62 bpm" and
|
||
* "106 mg/dL" measured wider than their axis and broke onto two lines on
|
||
* every screen. The second line dropped onto the first x tick. A label with
|
||
* no breaking space is one word and stays on one line.
|
||
*/
|
||
export function axisUnitSuffix(
|
||
unit: string | null | undefined,
|
||
): string | undefined {
|
||
return unit ? ` ${unit}` : undefined;
|
||
}
|