feat: Less indentation for deep trees with single child (#686)

Before:

![image](https://github.com/user-attachments/assets/f6a9ebb2-80de-4e79-b670-d65ed274a6cf)

After:

![image](https://github.com/user-attachments/assets/28fdcdf4-0bc7-4d8c-9436-a08e3e12dbc5)

Before: 


![image](https://github.com/user-attachments/assets/9c9db19e-c8c2-4619-a34a-dc026cbaf792)

After:


![image](https://github.com/user-attachments/assets/458f03ac-a2ed-45ef-bffa-cab6c7218728)

Author: BYK

.changeset/plenty-foxes-destroy.md

@@ -0,0 +1,8 @@
+---
+'@spotlightjs/spotlight': minor
+'@spotlightjs/electron': minor
+'@spotlightjs/overlay': minor
+'@spotlightjs/astro': minor
+---
+
+Flatter tree view for deeply nested traces with 1 child at each level

.vscode/settings.json

@@ -31,6 +31,7 @@
     "TEAMID",
     "treeshake",
     "ttfb",
+    "txns",
     "unsign",
     "uuidv",
     "VITE",

packages/overlay/src/index.css

@@ -44,11 +44,13 @@ ul.tree ul {
   margin: 0;
   padding: 0;
 }
-ul.tree ul {
+ul.tree.deep > li > ul {
   margin-left: 8px;
 }
-ul.tree li {
+ul.tree.deep > li {
   @apply border-primary-400 border-l;
+  padding-left: 1rem;
+  margin-left: 1rem;
 }
 
 ul.tree li:last-child {
@@ -59,11 +61,10 @@ ul.tree > li:first-child:before {
   display: none;
 }
 
-ul.tree > li:before,
+ul.tree.deep > li:before,
 ul.tree ul.tree > li:before {
   @apply border-primary-400 border-b;
   position: absolute;
-  margin-top: -2px;
   height: 15px;
   width: 12px;
   content: '';

packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanItem.tsx

@@ -31,8 +31,9 @@ const SpanItem = ({
 }) => {
   const { spanId } = useParams();
   const containerRef = useRef<HTMLLIElement>(null);
+  const childrenCount = span.children ? span.children.length : 0;
   const [isItemCollapsed, setIsItemCollapsed] = useState(
-    (span.transaction && totalTransactions > 1 && depth !== 1) || depth >= 15,
+    (span.transaction && totalTransactions > 1 && depth !== 1) || depth >= 15 || childrenCount > 10,
   );
   const [isResizing, setIsResizing] = useState(false);
 
@@ -51,7 +52,7 @@ const SpanItem = ({
     : false;
 
   return (
-    <li key={span.span_id} className="pl-4" ref={containerRef}>
+    <li key={span.span_id} ref={containerRef}>
       <Link
         className={classNames(
           'hover:bg-primary-900 group flex text-sm',
@@ -74,15 +75,15 @@ const SpanItem = ({
             width: `${spanNodeWidth}%`,
           }}
         >
-          {(span.children || []).length > 0 && (
+          {childrenCount > 0 && (
             <div
               className="bg-primary-600 z-10 mr-1 flex items-center gap-1 rounded-lg px-1 text-xs font-bold text-white"
               onClick={e => {
                 e.preventDefault();
                 setIsItemCollapsed(prev => !prev);
               }}
             >
-              {(span.children || []).length}
+              {childrenCount}
               <ChevronIcon
                 width={12}
                 height={12}
@@ -128,7 +129,7 @@ const SpanItem = ({
           tree={span.children || []}
           startTimestamp={startTimestamp}
           totalDuration={totalDuration}
-          depth={depth + 1}
+          depth={childrenCount > 1 ? depth + 1 : depth}
           totalTransactions={totalTransactions}
           spanNodeWidth={spanNodeWidth}
           setSpanNodeWidth={setSpanNodeWidth}

packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanTree.tsx

@@ -1,3 +1,4 @@
+import classNames from '../../../../../../lib/classNames';
 import { Span, TraceContext } from '../../../../types';
 import SpanItem from './SpanItem';
 
@@ -25,7 +26,7 @@ export default function SpanTree({
   if (!tree || !tree.length) return null;
 
   return (
-    <ul className="tree">
+    <ul className={classNames(tree.length > 1 && 'deep', 'tree')}>
       {tree.map(span => {
         return (
           <SpanItem