fix(webapp): stop smart column text re-truncating and the dialog growing

The truncated cell text visibly ate itself a character at a time on load. Two
separate causes:

Runaway loop. MiddleTruncate measures its parent, and the cell sat in a
max-width box inside an auto-width table column: eliding text narrowed the box,
which narrowed the column, which re-triggered truncation. Sampling showed it
never settled -- 226 chars down to 62 and still shrinking after six seconds. The
box is now a definite width, which its own content cannot influence, and the
decision to use it comes from the raw string length rather than from layout.

Late first pass. Truncation needs layout, so the server rendered the whole
string and it only shortened once React hydrated, ~3.6s in. MiddleTruncate now
accepts an optional initialCharBudget and seeds its first render with a
deterministic character-count truncation, so SSR and the pre-hydration client
agree and the measured pass only refines it (99 chars to 102 here, versus 226
to 102 before). Callers that don't pass it are unaffected.

Also:
- Size the dialog from the form column alone. The sample and preview panels
  fill their column but no longer contribute height to it, so wrapped preview
  text scrolls instead of pushing the dialog taller (verified stable at 732px
  with four long rows).
- Give all three columns one title row so their labels line up (they sat 3px
  apart because only two of them had a min-height).
- Swap the smart column row's remove and edit buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/primitives/MiddleTruncate.tsx

@@ -9,8 +9,22 @@ type MiddleTruncateProps = {
   tooltipDelay?: number;
   /** Merged onto the tooltip body, for callers whose text needs a bigger or scrollable box. */
   tooltipContentClassName?: string;
+  /**
+   * Roughly how many characters fit, used only for the very first render. Truncation needs
+   * layout, so the server (and the pre-hydration client) can only render the full string --
+   * long values visibly snapped shorter once React hydrated. Seeding from a character count
+   * is deterministic, so it matches on both sides and the measured pass just refines it.
+   */
+  initialCharBudget?: number;
 };
 
+/** Deterministic, layout-free middle truncation used to seed the first render. */
+function seedTruncation(text: string, budget: number | undefined): string {
+  if (budget === undefined || text.length <= budget) return text;
+  const keep = Math.max(1, Math.floor((budget - 1) / 2));
+  return `${text.slice(0, keep)}…${text.slice(-keep)}`;
+}
+
 /**
  * A component that truncates text in the middle, showing the beginning and end.
  * Shows the full text in a tooltip on hover when truncated.
@@ -22,11 +36,13 @@ export function MiddleTruncate({
   className,
   tooltipDelay,
   tooltipContentClassName,
+  initialCharBudget,
 }: MiddleTruncateProps) {
+  const seed = seedTruncation(text, initialCharBudget);
   const containerRef = useRef<HTMLSpanElement>(null);
   const measureRef = useRef<HTMLSpanElement>(null);
-  const [displayText, setDisplayText] = useState(text);
-  const [isTruncated, setIsTruncated] = useState(false);
+  const [displayText, setDisplayText] = useState(seed);
+  const [isTruncated, setIsTruncated] = useState(seed !== text);
 
   const calculateTruncation = useCallback(() => {
     const container = containerRef.current;

apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx

@@ -58,6 +58,16 @@ const DISPLAY_OPTIONS = SMART_COLUMN_DISPLAYS.map((display) => ({
 
 const DEFAULT_SOURCE: SmartColumnSource = "payload";
 
+/** One title row for all three columns, so their labels and content line up. */
+const TITLE_ROW_CLASS = "flex min-h-6 items-center";
+
+/**
+ * The sample and preview panels fill their column but contribute no height to it, so the
+ * dialog is sized by the form alone. Without this, wrapped preview text pushed the whole
+ * dialog taller as you typed.
+ */
+const PANEL_FRAME_CLASS = "relative min-h-0 flex-1";
+
 export function AddSmartColumnDialog({
   open,
   editing,
@@ -180,7 +190,9 @@ export function AddSmartColumnDialog({
           <div className="grid min-h-0 grid-cols-1 items-stretch gap-2.5 md:grid-cols-3">
             <div className="flex flex-col gap-4 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
               <InputGroup fullWidth>
-                <Label>Source</Label>
+                <div className={TITLE_ROW_CLASS}>
+                  <Label>Source</Label>
+                </div>
                 <RadioGroup
                   className="flex flex-col gap-2"
                   value={source}
@@ -247,7 +259,7 @@ export function AddSmartColumnDialog({
             </div>
 
             <div className="flex min-h-0 flex-col gap-1.5">
-              <div className="flex min-h-6 items-center justify-between gap-2">
+              <div className={cn(TITLE_ROW_CLASS, "justify-between gap-2")}>
                 <Label>Sample {source}</Label>
                 {usable.length > 1 && (
                   <SampleRunPicker
@@ -258,38 +270,42 @@ export function AddSmartColumnDialog({
                   />
                 )}
               </div>
-              <div className="flex-1 overflow-auto rounded-lg border border-grid-dimmed bg-charcoal-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
-                {!sampleLoaded ? (
-                  <Paragraph variant="extra-small" className="text-text-dimmed">
-                    Loading…
-                  </Paragraph>
-                ) : activeSample ? (
-                  <SmartColumnSample
-                    value={activeSample.value}
-                    activePath={path.trim()}
-                    onSelectPath={setPath}
-                  />
-                ) : runCount === 0 ? (
-                  <Paragraph variant="extra-small" className="text-text-dimmed">
-                    No runs to sample yet.
-                  </Paragraph>
-                ) : anyOffloaded ? (
-                  <Paragraph variant="extra-small" className="text-text-dimmed">
-                    Recent {source}s are too large to sample here.
-                  </Paragraph>
-                ) : (
-                  <Paragraph variant="extra-small" className="text-text-dimmed">
-                    No recent run has a {source} to sample.
-                  </Paragraph>
-                )}
+              <div className={PANEL_FRAME_CLASS}>
+                <div className="absolute inset-0 overflow-auto rounded-lg border border-grid-dimmed bg-charcoal-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
+                  {!sampleLoaded ? (
+                    <Paragraph variant="extra-small" className="text-text-dimmed">
+                      Loading…
+                    </Paragraph>
+                  ) : activeSample ? (
+                    <SmartColumnSample
+                      value={activeSample.value}
+                      activePath={path.trim()}
+                      onSelectPath={setPath}
+                    />
+                  ) : runCount === 0 ? (
+                    <Paragraph variant="extra-small" className="text-text-dimmed">
+                      No runs to sample yet.
+                    </Paragraph>
+                  ) : anyOffloaded ? (
+                    <Paragraph variant="extra-small" className="text-text-dimmed">
+                      Recent {source}s are too large to sample here.
+                    </Paragraph>
+                  ) : (
+                    <Paragraph variant="extra-small" className="text-text-dimmed">
+                      No recent run has a {source} to sample.
+                    </Paragraph>
+                  )}
+                </div>
               </div>
             </div>
 
             <div className="flex min-h-0 flex-col gap-1.5">
-              <div className="flex min-h-6 items-center">
+              <div className={TITLE_ROW_CLASS}>
                 <Label>Preview</Label>
               </div>
-              <SmartColumnPreview rows={perRun} def={previewDef} loaded={sampleLoaded} />
+              <div className={PANEL_FRAME_CLASS}>
+                <SmartColumnPreview rows={perRun} def={previewDef} loaded={sampleLoaded} />
+              </div>
             </div>
           </div>
         </div>
@@ -354,7 +370,7 @@ function SmartColumnPreview({
   const alignClass = numeric ? "justify-end text-right tabular-nums" : "justify-start text-left";
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-grid-dimmed">
+    <div className="absolute inset-0 flex flex-col overflow-hidden rounded-lg border border-grid-dimmed">
       <div className="flex flex-none items-center gap-1 border-b border-grid-dimmed bg-background-dimmed px-2.5 py-1.5">
         <span className="truncate text-xs font-medium text-text-bright">
           {def.label || "Column"}

apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx

@@ -366,15 +366,6 @@ function ColumnRow({
         {isSmart && <SmartColumnIcon className="size-3.5 flex-none text-text-dimmed" />}
       </label>
       <div className="flex flex-none items-center gap-0.5 pr-1">
-        {onEdit && (
-          <Button
-            variant="minimal/small"
-            onClick={onEdit}
-            aria-label={`Edit ${col.def.label}`}
-            LeadingIcon={<PencilSquareIcon className="size-4" />}
-            className={ROW_ACTION_CLASS}
-          />
-        )}
         {onRemove && (
           <Button
             variant="minimal/small"
@@ -384,6 +375,15 @@ function ColumnRow({
             className={cn(ROW_ACTION_CLASS, "group-hover/button:text-error")}
           />
         )}
+        {onEdit && (
+          <Button
+            variant="minimal/small"
+            onClick={onEdit}
+            aria-label={`Edit ${col.def.label}`}
+            LeadingIcon={<PencilSquareIcon className="size-4" />}
+            className={ROW_ACTION_CLASS}
+          />
+        )}
         {/* Button forwards no onKeyDown, so the arrow-key reorder listens on the wrapper
             and catches the event bubbling up from the focused button. */}
         <span

apps/webapp/app/components/runs/v3/smartColumnCell.tsx

@@ -33,8 +33,19 @@ function toFiniteNumber(value: unknown): number {
   return NaN;
 }
 
-/** How wide a truncated text cell may get before the middle is elided. */
-const TEXT_CELL_MAX_WIDTH = "max-w-[600px]";
+/**
+ * Long text renders in a fixed-width box, not a max-width one. MiddleTruncate measures its
+ * parent, and a runs table column is auto-width: a max-width box narrows as the text is
+ * elided, which shrinks the column, which re-triggers truncation, and so on -- the text
+ * visibly ate itself a character at a time and never settled. A definite width can't be
+ * influenced by its own content, so the measurement converges on the first pass.
+ */
+const TEXT_CELL_WIDTH = "w-[600px]";
+/**
+ * Whether a value is long enough to need the fixed box, decided from the raw string so the
+ * choice never depends on layout (which is what made the loop possible). ~600px of 13px text.
+ */
+const TEXT_CELL_CHAR_BUDGET = 100;
 /** Long values are common enough that an instant tooltip would fire while just scanning rows. */
 const TEXT_CELL_TOOLTIP_DELAY_MS = 500;
 /** A whole payload string can be arbitrarily long, so the tooltip is capped and scrolls. */
@@ -61,14 +72,14 @@ function renderSmartValue(
       return <Badge variant="extra-small">{stringifySmartValue(value)}</Badge>;
     default: {
       const text = stringifySmartValue(value);
-      if (!truncate) return text;
-      // MiddleTruncate measures against its parent, so it needs the width cap around it.
+      if (!truncate || text.length <= TEXT_CELL_CHAR_BUDGET) return text;
       return (
-        <span className={cn("block min-w-0", TEXT_CELL_MAX_WIDTH)}>
+        <span className={cn("block", TEXT_CELL_WIDTH)}>
           <MiddleTruncate
             text={text}
             tooltipDelay={TEXT_CELL_TOOLTIP_DELAY_MS}
             tooltipContentClassName={TEXT_CELL_TOOLTIP_CLASS}
+            initialCharBudget={TEXT_CELL_CHAR_BUDGET}
           />
         </span>
       );