Cute visual indicator

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -83,7 +83,10 @@
         <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
       </div>
     </td>
-    <td scope="row" class="depth-{{depth}}">
+    <td scope="row" class="name-cell" style="--depth: {{depth}}">
+      @if (depth > 0) {
+        <div class="indicator"></div>
+      }
       <button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button>
     </td>
     <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>

src-ui/src/app/components/manage/management-list/management-list.component.scss

@@ -11,26 +11,16 @@ tbody tr:last-child td {
     min-height: 0;
 }
 
-.depth-0 {
-    padding-left: 0;
-}
+td.name-cell {
+    padding-left: calc(calc(var(--depth) - 1) * 1.1rem);
 
-.depth-1 {
-    padding-left: 20px;
-}
-
-.depth-2 {
-    padding-left: 40px;
-}
-
-.depth-3 {
-    padding-left: 60px;
-}
-
-.depth-4 {
-    padding-left: 80px;
-}
-
-.depth-5 {
-    padding-left: 100px;
+    .indicator {
+        display: inline-block;
+        width: .8rem;
+        height: .8rem;
+        border-left: 1px solid var(--bs-secondary);
+        border-bottom: 1px solid var(--bs-secondary);
+        margin-right: .25rem;
+        margin-left: .5rem;
+    }
 }