From b451d121b55fa6615df6f7a8dbeb355cff492de6 Mon Sep 17 00:00:00 2001
From: egeoztass <egeoztas@sabanciuniv.edu>
Date: Thu, 16 Apr 2026 18:14:29 +0300
Subject: [PATCH] fix: prevent value overflow in KeyValueGrid

Long values in the KeyValueGrid were overflowing into the key column.
Added min-w-0 and max-w-[60%] to the value container so truncation
works correctly within the flex layout.

Closes #305

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/start/src/components/ui/key-value-grid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/start/src/components/ui/key-value-grid.tsx b/apps/start/src/components/ui/key-value-grid.tsx
index ea0fbd410..213ac9736 100644
--- a/apps/start/src/components/ui/key-value-grid.tsx
+++ b/apps/start/src/components/ui/key-value-grid.tsx
@@ -126,7 +126,7 @@ export function KeyValueGrid({
           </div>
           <div
             className={cn(
-              'text-right text-sm font-mono truncate',
+              'text-right text-sm font-mono truncate min-w-0 max-w-[60%]',
               valueClassName,
             )}
             title={typeof item.value === 'string' ? item.value : undefined}