fix: stack the next-change line instead of letting it wrap

With the week down the right-hand side the main block is narrower, and
putting the French and English on one row set the two languages
competing for the width. In production that read as "Ouvre demain à" /
"11:00" on one side and the separator stranded on a second line with
"am" — visibly broken.

They are stacked now, French above English, which is already the pattern
in the banner, and each line is fitted to the width available rather
than allowed to wrap.

Found by rendering the real production payload rather than the sample
one: the sample had a short enough sentence to hide it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd
This commit is contained in:
2026-09-21 23:10:57 +02:00
co-authored by Claude Opus 5
parent 185610ee61
commit ec826b378f
2 changed files with 55 additions and 9 deletions
+15 -3
View File
@@ -76,18 +76,30 @@ describe('screenTree', () => {
);
});
it('drops the separator when only one language has something to say', () => {
it('shows whichever language has something to say', () => {
const frenchOnly = JSON.stringify(
screenTree({ ...PAYLOAD, today: { ...PAYLOAD.today, next_change_en: '' } }),
);
expect(frenchOnly).toContain('Ferme à 13:00');
expect(frenchOnly).not.toContain('"·"');
expect(frenchOnly).not.toContain('Closes at');
const englishOnly = JSON.stringify(
screenTree({ ...PAYLOAD, today: { ...PAYLOAD.today, next_change_fr: '' } }),
);
expect(englishOnly).toContain('Closes at 1:00 pm');
expect(englishOnly).not.toContain('"·"');
expect(englishOnly).not.toContain('Ferme à');
});
it('shrinks a long next-change line instead of wrapping it', () => {
// The main block is narrower now the week runs down the side; a long
// sentence used to wrap and strand half of itself on a second line.
const long = 'Ouvre lundi à 11:00 après la fermeture annuelle';
const tree = JSON.stringify(
screenTree({ ...PAYLOAD, today: { ...PAYLOAD.today, next_change_fr: long } }),
);
const sizes = [...tree.matchAll(/"fontSize":(\d+)/g)].map((match) => Number(match[1]));
// Something on the screen had to come down from the preferred 24.
expect(sizes.some((size) => size < 24 && size >= 18)).toBe(true);
});
it('drops the whole next-change line when there is nothing ahead', () => {