From 257f9d732356dd14c980268e59c42e37bc342362 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 14 Aug 2026 10:55:37 -0700
Subject: [PATCH] [eric] canvas: the collapsed pill's question widget gets a
 real width and can never render narrower than its content

---
 .../Dashboard/desktop/PillArtifactFrame.tsx   |  7 ++++++-
 .../desktop/pillArtifactWidth.test.ts         | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/pages/Dashboard/desktop/pillArtifactWidth.test.ts

diff --git a/frontend/src/app/pages/Dashboard/desktop/PillArtifactFrame.tsx b/frontend/src/app/pages/Dashboard/desktop/PillArtifactFrame.tsx
index 002de3ce..8532b055 100644
--- a/frontend/src/app/pages/Dashboard/desktop/PillArtifactFrame.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/PillArtifactFrame.tsx
@@ -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
diff --git a/frontend/src/app/pages/Dashboard/desktop/pillArtifactWidth.test.ts b/frontend/src/app/pages/Dashboard/desktop/pillArtifactWidth.test.ts
new file mode 100644
index 00000000..07d63c0b
--- /dev/null
+++ b/frontend/src/app/pages/Dashboard/desktop/pillArtifactWidth.test.ts
@@ -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);
+});