From 134ff540b53b5bbe1deef4c30e83d7b82980050f Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Wed, 15 Oct 2025 10:20:50 +0300
Subject: [PATCH] fix(devtools): directive-forest minor UI fixes (#64426)

- Fix the hydration icons when the text from the nodes exceeds the component width
- Align and slightly enlarge the arrow icons

PR Close #64426
---
 .../tree-node/tree-node.component.html        |  2 +-
 .../tree-node/tree-node.component.scss        | 44 ++++++++++++++-----
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.html
index f03b0699a0a..fa0cb25a8d8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.html
@@ -48,7 +48,7 @@
       <mat-icon matTooltip="Hydrated" class="hydration">water_drop</mat-icon>
     }
     @case ('dehydrated') {
-      <mat-icon matTooltip="Dehydrated" class="hydration skipped">pending</mat-icon>
+      <mat-icon matTooltip="Dehydrated" class="hydration skipped">water_do</mat-icon>
     }
 
     @case ('skipped') {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.scss
index 839586ac024..4a6ae019158 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.scss
@@ -6,20 +6,31 @@
   cursor: default;
   @extend %monospaced;
   white-space: nowrap;
-  text-overflow: ellipsis;
   display: block;
 
   &:hover {
     background-color: var(--color-tree-node-hovered);
+
+    .tree-node-info > .hydration {
+      background-color: var(--color-tree-node-hovered);
+    }
   }
 
   &.selected,
   &.highlighted {
     background-color: var(--color-tree-node-highlighted);
+
+    .tree-node-info > .hydration {
+      background-color: var(--color-tree-node-highlighted);
+    }
   }
 
   &.new-node {
     animation: appear 1.5s;
+
+    .tree-node-info > .hydration {
+      animation: appear 1.5s;
+    }
   }
 
   .non-element {
@@ -28,22 +39,25 @@
 
   .tree-node-info {
     display: flex;
+    align-items: center;
 
     & > button {
+      $size: 12px;
+      width: $size;
+      height: $size;
       outline: none;
       border: 0;
       padding: 0;
       position: absolute;
       background-color: transparent;
-      top: 2px;
-    }
+      margin-left: 3px;
 
-    .mat-icon {
-      font-size: 0.8em;
-      width: 16px;
-      height: 13px;
-      display: inline-block;
-      color: var(--primary-contrast);
+      mat-icon {
+        font-size: $size;
+        width: $size;
+        height: $size;
+        color: var(--primary-contrast);
+      }
     }
 
     .node-name {
@@ -93,15 +107,21 @@
     }
 
     .hydration {
-      margin: auto 8px auto auto;
-      font-size: 14px;
+      $size: 14px;
+      margin-left: auto;
+      padding: 0 0.375rem 0 0.125rem;
+      font-size: $size;
+      width: $size;
+      height: $size;
       color: var(--blue-02);
+      background-color: var(--color-background);
+      border-radius: 20%;
 
       position: sticky;
       right: 0;
 
       &.skipped {
-        color: var(--senary-contrast);
+        color: var(--quinary-contrast);
       }
 
       &.mismatched {