Add full width to multiline detail values

dcrjodle · claude · dcrjodle · commit d8e49e4b1374 · 2026-06-23T10:32:25.000Z
DetailItem multiline values now use w-full to ensure the value container
stretches to full width, allowing child layouts with justify-between to
properly position elements at opposite edges.

Co-Authored-By: Claude Sonnet 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/src/frontend/src/components/ui/detail.tsx b/src/frontend/src/components/ui/detail.tsx
@@ -61,7 +61,7 @@ const DetailItem = React.forwardRef<HTMLDivElement, DetailItemProps>(
             detailValueSizeVariant({ density }),
             multiline
               ? cn(
-                  "whitespace-normal break-words text-left",
+                  "w-full whitespace-normal break-words text-left",
                   detailValueMultiLinePaddingVariant({ density }),
                 )
               : "truncate text-right ml-auto",

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@ const DetailItem = React.forwardRef<HTMLDivElement, DetailItemProps>(`
`61`	`61`	`detailValueSizeVariant({ density }),`
`62`	`62`	`multiline`
`63`	`63`	`? cn(`
`64`		`- "whitespace-normal break-words text-left",`
	`64`	`+ "w-full whitespace-normal break-words text-left",`
`65`	`65`	`detailValueMultiLinePaddingVariant({ density }),`
`66`	`66`	`)`
`67`	`67`	`: "truncate text-right ml-auto",`