mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 06:40:50 +00:00
Marc-André Bombeck
facfcad107
The tooltip shrinks to the room right of its clamped left edge and wraps, so it never ran past the screen, but near the right border it filled that room to the last pixel. Cap its width at the room less the 8 px gutter the clamp was meant to leave.
28 lines
926 B
TypeScript
28 lines
926 B
TypeScript
/**
|
|
* The pinned heatmap tooltip on a 390 px phone. It shrinks to the room right
|
|
* of its left edge and wraps, so it never runs past the screen; measured in
|
|
* Chromium, a tap at the right border left it flush against the edge. The
|
|
* box keeps the 8 px gutter the clamp meant to leave.
|
|
*/
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { tooltipBox } from "../heatmap-day";
|
|
|
|
describe("tooltipBox", () => {
|
|
it("keeps an 8 px gutter at the right edge for a tap near the border", () => {
|
|
const { left, maxWidth } = tooltipBox(380, 390);
|
|
expect(left).toBe(182);
|
|
expect(left + maxWidth).toBe(390 - 8);
|
|
});
|
|
|
|
it("sits beside the pointer away from the border", () => {
|
|
const { left, maxWidth } = tooltipBox(40, 390);
|
|
expect(left).toBe(50);
|
|
expect(left + maxWidth).toBe(382);
|
|
});
|
|
|
|
it("never starts left of the 8 px gutter", () => {
|
|
expect(tooltipBox(-20, 390).left).toBe(8);
|
|
});
|
|
});
|