[eric] canvas: the collapsed pill's question widget gets a real width and can never render narrower than its content

This commit is contained in:
ciregenz
2026-08-14 10:55:37 -07:00
parent 156c6092a3
commit 257f9d7323
2 changed files with 26 additions and 1 deletions
@@ -13,6 +13,9 @@ const DEFAULT_W = 320;
const FAMILY_WIDTHS: Array<[RegExp, number]> = [
[/table|chart|gallery|carousel|terminal|code|diff/i, 560],
[/map|image|video|post/i, 460],
// question/ask carries option rows with multi-sentence descriptions plus its own composer; at the
// 320 fallback it rendered visibly cut off (Eric's 1.7.8-exp.3 screenshot, 2026-08-14).
[/question|ask/i, 560],
[/stats|plan|links|order|preferences/i, 380],
];
@@ -85,7 +88,9 @@ function PillArtifactFrame({ name, children }: Props): React.ReactElement {
onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
onClick={(e: React.MouseEvent) => e.stopPropagation()}
onDoubleClick={(e: React.MouseEvent) => e.stopPropagation()}
sx={{ position: 'relative', width, maxWidth: '90vw', '&:hover .osw-artifact-grip': { opacity: 1 } }}
// minWidth min-content: a stored or family width narrower than what the widget can actually
// shrink to must widen the frame, never cut the widget; clipping is not a size option.
sx={{ position: 'relative', width, minWidth: 'min-content', maxWidth: '90vw', '&:hover .osw-artifact-grip': { opacity: 1 } }}
>
{children}
<Box
@@ -0,0 +1,20 @@
// Run: npm test (frontend/scripts/run-tests.mjs)
//
// Eric's 1.7.8-exp.3 screenshot: the collapsed pill's question widget rendered visibly cut off,
// because "question" matched no family rule and fell to the 320px fallback while its option rows
// carry multi-sentence descriptions plus a composer. The frame must give ask-shaped widgets the
// wide family, and the width table stays ordered so the specific rules win before the fallback.
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { defaultWidthFor } from './PillArtifactFrame.tsx';
test('question and ask widgets get the wide family, not the 320 fallback', () => {
assert.equal(defaultWidthFor('question'), 560);
assert.equal(defaultWidthFor('question-flow'), 560);
assert.equal(defaultWidthFor('ask'), 560);
});
test('tables keep their width and unknown names keep the fallback', () => {
assert.equal(defaultWidthFor('data-table'), 560);
assert.equal(defaultWidthFor('weather-widget'), 320);
});