From 9d0b8ac0fec9ae9a34e4dde1218e25caa73e852a Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 19 Jul 2023 08:58:20 -0700
Subject: [PATCH] Align badge in tree

Reviewed By: lblasa

Differential Revision: D47520030

fbshipit-source-id: 01466aff57d048a50803366957396abeb76d5649
---
 .../public/ui-debugger/components/Tree.tsx     | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index dcb653f1b..caa0d54cb 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -70,7 +70,6 @@ export type TreeNode = UINode & {
   isExpanded: boolean;
   indentGuide: NodeIndentGuide | null;
 };
-
 export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
   const instance = usePlugin(plugin);
   const focusedNode = useValue(instance.uiState.focusedNode);
@@ -364,17 +363,16 @@ function TreeItemContainer({
           }}
         />
         {nodeIcon(treeNode)}
-        {events ? (
+
+        <TreeItemRowContent treeNode={treeNode} />
+        {events && (
           <Badge
-            key={treeNode.id}
             count={events.length}
-            size="small"
-            color={theme.primaryColor}
-            offset={[10, 5]}>
-            <TreeItemRowContent treeNode={treeNode} />
-          </Badge>
-        ) : (
-          <TreeItemRowContent treeNode={treeNode} />
+            style={{
+              backgroundColor: theme.primaryColor,
+              marginLeft: theme.space.small,
+            }}
+          />
         )}
       </TreeItemRow>
     </div>