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 {} / [].

Author: ericallam

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">