refactor(devtools): fix signal details UI

Fix different action buttons and value preview container size.

devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss

@@ -16,12 +16,19 @@
   }
 
   &.size-compact {
-    padding: 0.1rem 0.5rem;
+    /*
+     * The sizing of compact buttons has a delicate role
+     * in the UI. This is why, we are subtracting the 1px border
+     * to keep the final size small.
+     */
+    padding: calc(0.1rem - 1px) calc(0.5rem - 1px);
   }
 
   &.type-primary {
     border-radius: 2rem;
     background: var(--dynamic-blue-02);
+    box-sizing: border-box;
+    border: 1px solid var(--dynamic-blue-02);
     color: var(--septenary-contrast);
   }
 

devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html

@@ -74,7 +74,7 @@
         [class.watched]="node.watched"
         [btnType]="node.watched ? 'primary' : 'secondary'"
         (click)="toggleIsBeingWatched()"
-        [matTooltip]="node.watched ? 'Unwatch signal' : 'Watch signal'"
+        [matTooltip]="node.watched ? 'Unwatch signal' : 'Watch signal (log in console)'"
       >
         <mat-icon> {{ node.watched ? 'visibility_off' : 'visibility' }} </mat-icon>
       </button>

devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.scss

@@ -14,7 +14,7 @@
   scrollbar-color: var(--quaternary-contrast) transparent;
 
   .header {
-    padding-bottom: 0.75rem;
+    padding-bottom: 0.625rem;
     border-bottom: 1px solid var(--quinary-contrast);
     display: flex;
     align-items: flex-start;
@@ -38,6 +38,7 @@
 
         ng-icon {
           --icon-size: 14px;
+          width: 16px;
         }
       }
     }

devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-value-tree/signal-value-tree.component.scss

@@ -1,5 +1,6 @@
 :host {
-  width: 200px;
+  min-width: 200px;
+  width: 100%;
   display: block;
   overflow: auto;
   border-radius: 0.25rem;