Fix width too big by adding min-width constraints

This commit is contained in:
Owen
2026-08-24 14:31:17 -04:00
parent 85b40b7164
commit 26f9026621
2 changed files with 12 additions and 8 deletions
+5 -5
View File
@@ -79,7 +79,7 @@ function MessageBubble({ message }: { message: NormalizedAiMessage }) {
)} )}
</div> </div>
<div <div
className={`max-w-[80%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap break-words ${ className={`min-w-0 max-w-[80%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap break-words ${
isUser isUser
? "bg-primary text-primary-foreground" ? "bg-primary text-primary-foreground"
: isTool : isTool
@@ -108,7 +108,7 @@ function RawFallbackBlock({
}) { }) {
const pretty = prettyRaw(raw); const pretty = prettyRaw(raw);
return ( return (
<div className="rounded-md border bg-muted/30 p-3"> <div className="min-w-0 rounded-md border bg-muted/30 p-3">
<div className="mb-1 text-xs font-medium text-muted-foreground"> <div className="mb-1 text-xs font-medium text-muted-foreground">
{label} {label}
{pretty && unparsedLabel && ( {pretty && unparsedLabel && (
@@ -117,7 +117,7 @@ function RawFallbackBlock({
</span> </span>
)} )}
</div> </div>
<pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words text-xs text-muted-foreground"> <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-all text-xs text-muted-foreground">
{pretty ?? noDataLabel} {pretty ?? noDataLabel}
</pre> </pre>
</div> </div>
@@ -172,7 +172,7 @@ export function AiSessionChatView({
</Button> </Button>
</div> </div>
{rawMode ? ( {rawMode ? (
<div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4"> <div className="flex min-w-0 max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
<RawFallbackBlock <RawFallbackBlock
label={t("aiSessionRequest")} label={t("aiSessionRequest")}
raw={normalizedRequest} raw={normalizedRequest}
@@ -185,7 +185,7 @@ export function AiSessionChatView({
/> />
</div> </div>
) : ( ) : (
<div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4"> <div className="flex min-w-0 max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
{hasRequestMessages ? ( {hasRequestMessages ? (
requestMessages!.map((message, i) => ( requestMessages!.map((message, i) => (
<MessageBubble key={`req-${i}`} message={message} /> <MessageBubble key={`req-${i}`} message={message} />
+4
View File
@@ -524,9 +524,13 @@ export function LogDataTable<TData, TValue>({
} }
className="p-4 bg-muted/50" className="p-4 bg-muted/50"
> >
{/* w-0 min-w-full keeps this cell's content from */}
{/* blowing out the table's auto column widths */}
<div className="w-0 min-w-full">
{renderExpandedRow( {renderExpandedRow(
row.original row.original
)} )}
</div>
</TableCell> </TableCell>
</TableRow> </TableRow>
) )