fix(story-mode): a long caption makes its panel taller instead of covering the art

From review round 11: a long caption ("Claude writes pyproject.toml
and changes test_csvstat.py; the tests pass, then Claude starts a git
repository and saves the work on a new branch …") covered the test
board, the POW and the code card's file name on a two-column panel.

A caption that reaches past the band above the art now makes its panel
taller by the difference (re-fitted on resize and on the Director's cut
toggle). Every scene keeps the panel's usual height as its stage and
stands at the bottom, the background filling the space above, the way
the final panel already did; Claude's balloon is placed against the
moved head. The browser test forces a long caption and checks the panel
grew and the caption ends above the art.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer committed 2026-10-18 17:56:55 +02:00
1 parent dc980d121c
commit 84c4be2d77
4 files changed
+59 -13

No files matched your search

+17
View File
@@ -166,6 +166,23 @@ describe('Story Mode in a real browser', () => {
expect(overflow).toBe(0);
// The final panel grows to its words and chips: nothing of them is cut off at its edge.
expect(await finalPanelHoldsItsWords()).toBe(true);
// A caption longer than the band above the art makes its panel taller, so it covers no art.
const fit = await page.evaluate(async () => {
const st = (window as any).app._story;
const rt = st.panels.find((p: { kind: string; splash: unknown }) => !p.splash && p.kind !== 'mission');
rt.capStory.textContent = 'Claude writes three files, runs the tests twice and saves the work. '.repeat(4);
(window as any).app._storyFitCaption(rt);
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
const cap = rt.capStory.parentElement as HTMLElement;
const base = parseFloat(getComputedStyle(rt.el).getPropertyValue('--story-panel-min'));
const border = rt.el.offsetHeight - rt.el.clientHeight;
return {
grew: rt.el.offsetHeight > base + 10,
clear:
cap.offsetTop + cap.offsetHeight <= rt.el.clientHeight - (rt.stageH ?? 0) + (88 * (base - border)) / 260 + 3,
};
});
expect(fit).toEqual({ grew: true, clear: true });
// The bar keeps to three rows, and a panel below the fold gets its buttons without a scroll.
expect(await page.evaluate(() => (document.querySelector('.story-bar') as HTMLElement).offsetHeight)).toBeLessThan(
190