Tabs horizontally overflow scroll in the side panel inspectors (#1556)

Author: samejr

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

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

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