From bb2319a36820fc8022139fd51225cf0182ac3949 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Mon, 17 Aug 2026 17:45:38 +0100
Subject: [PATCH] feat(webapp): thin scrollbars and inline empty objects in the
 sample tree

Use the app's thin scrollbar style in the sample panel instead of the
default chunky one, and render empty objects/arrays inline as {} / [].
---
 .../app/components/runs/v3/SmartColumnSample.tsx  | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx b/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx
index a361ff1c0..7844b0fb7 100644
--- a/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx
+++ b/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx
@@ -20,7 +20,7 @@ export function SmartColumnSample({
   onSelectPath: (path: string) => void;
 }) {
   return (
-    <div className="max-h-52 overflow-auto rounded bg-charcoal-900 p-2 font-mono text-xs leading-relaxed">
+    <div className="max-h-52 overflow-auto rounded bg-charcoal-900 p-2 font-mono text-xs leading-relaxed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <JsonNode
         name={undefined}
         path="$"
@@ -81,6 +81,19 @@ function JsonNode({
   const openBrace = isArray ? "[" : "{";
   const closeBrace = isArray ? "]" : "}";
 
+  if (entries.length === 0) {
+    return (
+      <div className="whitespace-pre px-0.5">
+        {keyLabel !== null && <span className="text-sky-300">{keyLabel}</span>}
+        {keyLabel !== null && <span className="text-text-dimmed">: </span>}
+        <span className="text-text-dimmed">
+          {openBrace}
+          {closeBrace}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className="whitespace-pre px-0.5">