refactor(devtools): update directive forest chevrons positioning method

Update how chevrons of each expandable directive forest item are positioned by being more explicit.

Author: hawkgs

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.html

@@ -4,7 +4,6 @@
   @if (node().expandable) {
     <!-- We stop propagration on dblClick to prevent to show the element panel -->
     <button
-      [style.left]="PADDING_LEFT_STEP * node().level + 'px'"
       (click)="treeControl().toggle(node())"
       (dblclick)="$event.stopPropagation()"
       [attr.aria-label]="'Toggle ' + node().name"

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.scss

@@ -38,6 +38,7 @@
   }
 
   .tree-node-info {
+    position: relative;
     display: flex;
     align-items: center;
 
@@ -50,7 +51,9 @@
       padding: 0;
       position: absolute;
       background-color: transparent;
-      margin-left: 3px;
+      margin-left: -$size;
+      top: calc(50% - $size / 2);
+      left: 0;
 
       mat-icon {
         font-size: $size;

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.ts

@@ -81,8 +81,6 @@ export class TreeNodeComponent {
 
   private matchedText: HTMLElement | null = null;
 
-  protected readonly PADDING_LEFT_STEP = PADDING_LEFT_STEP;
-
   constructor() {
     afterRenderEffect({write: () => this.handleMatchedText()});
   }