I have difficulty in solving UI issue of expanding tree on the last node it always giving excessive line from the node just like the picture below.
I tried to reduced the the left border height but it still got no change at all.
Does anyone has any ideas and how to solve this.

Many Thanks in Advance

Does anyone know why ?

[PICTURE HERE](https://i.stack.imgur.com/zK67j.png)

here's the code for the CSS

```
.tree-nested-node {
  padding-left: 30px;
}

mat-tree {
  margin-left: 18px;
}
.mat-tree-node {
  padding: 0;
  background-color: white;
  width: 100%;
  display: block;
}

.mat-nested-tree-node {
  top: -24px;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li.tree-container {
  border-bottom: 0;
  /*display: block;*/
}

ul {
  padding-left: 10px;
}

li {
  padding-left: 10px;
  border: dotted grey;
  border-width: 0 0 1px 1px;
  position: relative;
  top: -1px;
}

li.mat-tree-node,
li div {
  margin: 0;
  position: relative;
  top: 24px;
}

li ul {
  border-top: 1px dotted grey;
  margin-left: -10px;
  padding-left: 28px;
}

.mat-nested-tree-node:last-child ul {
  border-left: 0;
  margin-left: -10px;
}

td.node-number {
  width: 90px !important;
  text-align: right !important;
}

td.node-icon {
  width: 30px !important;
  text-align: center !important;
}

table.node-box {
  width: 100%;
}

 <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
        <li class="tree-container">
          <div class="mat-tree-node">
            <aten-hierarchy-tree-node [hierarchyNode]="node"
                                      (onCollapsingNode)="collapseNode($event)"
                                      (onExpandingNode)="expandNode($event)">
            </aten-hierarchy-tree-node>
          </div>
          <ul class="tree-nested-node">
            <div *ngIf="treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
              <div style="height: 34px;"></div>
            </div>
          </ul>
        </li>
  </mat-nested-tree-node>

```