From f56059461093cf75c3f1188ff04f4e2058318506 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 13 Dec 2024 11:08:04 +0000
Subject: [PATCH] Tabs horizontally overflow scroll in the side panel
 inspectors (#1556)

---
 apps/webapp/app/components/runs/v3/RunInspector.tsx           | 2 +-
 apps/webapp/app/components/runs/v3/SpanInspector.tsx          | 2 +-
 .../route.tsx                                                 | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/RunInspector.tsx b/apps/webapp/app/components/runs/v3/RunInspector.tsx
index 4ff84dfdb6..540083fff9 100644
--- a/apps/webapp/app/components/runs/v3/RunInspector.tsx
+++ b/apps/webapp/app/components/runs/v3/RunInspector.tsx
@@ -121,7 +121,7 @@ export function RunInspector({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}
diff --git a/apps/webapp/app/components/runs/v3/SpanInspector.tsx b/apps/webapp/app/components/runs/v3/SpanInspector.tsx
index da423111c2..0614efaff7 100644
--- a/apps/webapp/app/components/runs/v3/SpanInspector.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanInspector.tsx
@@ -67,7 +67,7 @@ export function SpanInspector({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
index cefdb4f585..55c9dd38dd 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -201,7 +201,7 @@ function SpanBody({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}
@@ -442,7 +442,7 @@ function RunBody({
           />
         )}
       </div>
-      <div className="px-3">
+      <div className="h-fit overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <TabContainer>
           <TabButton
             isActive={!tab || tab === "overview"}