Fix warning about mixed tree node types

src/app/checklists/checklist-tree/checklist-tree.component.html

@@ -11,11 +11,13 @@
   <!-- This is the tree node template for leaf nodes -->
   <!-- There is inline padding applied to this node using styles.
        This padding value depends on the mat-icon-button width. -->
-  <mat-tree-node
+  <mat-nested-tree-node
     *matTreeNodeDef="let node"
     [attr.aria-label]="(node.isAddNew ? '' : 'Checklist: ') + node.title"
     matTreeNodePadding
-    matTreeNodePaddingIndent="12px"
+    matTreeNodePaddingIndent="12"
+    level="1"
+    class="checklist-node"
     [class.checklist-selected]="node.checklist && selectedChecklist() === node.checklist"
     (click)="onNodeSelect(node)"
     checklistDrag
@@ -32,14 +34,15 @@
       (nodeDelete)="onChecklistDelete(node)"
       [disableButtonHover]="dragging"
     />
-  </mat-tree-node>
+  </mat-nested-tree-node>
 
   <!-- This is the tree node template for expandable nodes -->
   <!-- TODO: Dragging of groups could use a better preview and placeholder -->
   <mat-nested-tree-node
     *matTreeNodeDef="let node; when: hasChild"
     id="group_{{ node.groupIdx }}"
     [attr.aria-label]="(node.isAddNew ? '' : 'Group: ') + node.title"
+    level="0"
     checklistDrag
     [checklistDragNode]="group"
     cdkDragLockAxis="y"

src/app/checklists/checklist-tree/checklist-tree.component.scss

@@ -8,23 +8,11 @@
   display: none;
 }
 
-.checklist-tree ul,
-.checklist-tree li {
-  margin-top: 0;
-  margin-bottom: 0;
-  list-style-type: none;
+.checklist-tree .checklist-node {
+  display: block;
 }
 
-/*
- * Padding for leaf nodes.
- * Leaf nodes need to have padding so as to align with other non-leaf nodes
- * under the same parent.
- */
-.checklist-tree div[role='group'] > .mat-tree-node {
-  padding-left: 20px;
-}
-
-.checklist-tree .mat-tree-node:hover {
+.checklist-tree .checklist-node:hover {
   background-color: gray;
 }