chore: more comments

index.html

@@ -16,7 +16,7 @@
       .header-title span {
         position: relative;
       }
-      .header-title span:before {
+      .header-title span::before {
         content: "";
         position: absolute;
         top: 100%;

web/projects/shared/styles/shared.scss

@@ -214,7 +214,7 @@ body {
   user-select: text;
 }
 
-.loading-dots:after {
+.loading-dots::after {
   content: '...';
   overflow: hidden;
   display: inline-block;
@@ -303,4 +303,4 @@ h5,
 h6,
 hr {
   margin: 0;
-}
+}

web/projects/shared/styles/taiga.scss

@@ -140,7 +140,7 @@
     background: transparent !important;
   }
 
-  tui-root._mobile &:after {
+  tui-root._mobile &::after {
     display: none;
   }
 }
@@ -149,7 +149,7 @@ tui-dialog {
   transform: translate3d(0, 0, 0);
 }
 
-tui-opt-group[data-label^='⚠️']:before {
+tui-opt-group[data-label^='⚠️']::before {
   color: var(--tui-warning-fill);
 }
 

web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.scss

@@ -26,7 +26,7 @@
     opacity: 0;
   }
 
-  &:after {
+  &::after {
     @include transition(opacity);
 
     content: '';

web/projects/ui/src/app/routes/portal/routes/dashboard/ui.component.ts

@@ -52,7 +52,7 @@ import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
     }
   `,
   styles: `
-    :host-context(tui-root._mobile) *:before {
+    :host-context(tui-root._mobile) *::before {
       font-size: 1.5rem !important;
     }
   `,

web/projects/ui/src/app/routes/portal/routes/system/backups/components/targets.component.ts

@@ -90,36 +90,40 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
         grid-column: span 3;
       }
 
-      .title {
+      .type {
+        order: 1;
+        text-transform: capitalize;
+        color: var(--tui-text-02);
+        grid-column: span 3;
+
+        tui-icon {
+          display: none;
+        }
+      }
+
+      .available {
         order: 2;
+      }
+
+      .title {
+        order: 3;
         font-weight: bold;
         text-transform: uppercase;
       }
 
-      .available {
-        order: 1;
-      }
-
       .actions {
-        order: 3;
+        order: 4;
         padding: 0;
         text-align: right;
       }
 
       .path {
-        order: 4;
+        order: 5;
         color: var(--tui-text-03);
         grid-column: span 2;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-
-      .type {
-        order: 5;
-        text-align: right;
-        text-transform: capitalize;
-        color: var(--tui-text-02);
-      }
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

web/projects/ui/src/app/routes/portal/routes/system/metrics/cpu.component.ts

@@ -45,7 +45,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
       top: 50%;
       left: 50%;
 
-      &:before {
+      &::before {
         content: '';
         position: absolute;
         inset: -0.5rem;
@@ -53,7 +53,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
         border-radius: 100%;
       }
 
-      &:after {
+      &::after {
         content: '';
         position: absolute;
         width: 0.25rem;

web/projects/ui/src/app/routes/portal/routes/system/metrics/metrics.component.ts

@@ -131,7 +131,7 @@ import { TimeService } from 'src/app/services/time.service'
         color: var(--tui-text-01);
         padding-top: 0.4rem;
 
-        &:after {
+        &::after {
           content: attr(data-unit);
           font-size: 0.5rem;
           font-weight: normal;

web/projects/ui/src/app/routes/portal/routes/system/settings/routes/domains/table.component.ts

@@ -17,7 +17,6 @@ import { Domain } from 'src/app/services/patch-db/data-model'
     <thead>
       <tr>
         <th>Domain</th>
-        <th>Added</th>
         <th>DDNS Provider</th>
         <th>Network Strategy</th>
         <th>Used By</th>
@@ -28,13 +27,12 @@ import { Domain } from 'src/app/services/patch-db/data-model'
       @for (domain of domains; track $index) {
         <tr *ngFor="let domain of domains">
           <td class="title">{{ domain.value }}</td>
-          <td class="date">{{ domain.createdAt | date: 'medium' }}</td>
           <td class="provider">{{ domain.provider }}</td>
           <td class="strategy">{{ getStrategy(domain) }}</td>
           <td class="used">
-            @if (domain.usedBy.length; as qty) {
+            @if (domain.usedBy.length + 1; as qty) {
               <button tuiLink (click)="onUsedBy(domain)">
-                Interfaces: {{ qty }}
+                Used by: {{ qty }}
               </button>
             } @else {
               N/A
@@ -60,7 +58,7 @@ import { Domain } from 'src/app/services/patch-db/data-model'
   styles: `
     :host-context(tui-root._mobile) {
       tr {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 2fr 1fr;
       }
 
       td:only-child {
@@ -78,22 +76,27 @@ import { Domain } from 'src/app/services/patch-db/data-model'
         text-align: right;
       }
 
-      .provider {
-        order: 3;
-      }
-
       .strategy {
-        order: 4;
-        text-align: right;
+        order: 3;
+        grid-column: span 2;
+
+        &::before {
+          content: 'Strategy: ';
+          color: var(--tui-text-02);
+        }
       }
 
-      .date {
-        order: 5;
-        color: var(--tui-text-03);
+      .provider {
+        order: 4;
+
+        &::before {
+          content: 'DDNS: ';
+          color: var(--tui-text-02);
+        }
       }
 
       .used {
-        order: 6;
+        order: 5;
         text-align: right;
 
         &:not(:has(button)) {

web/projects/ui/src/app/routes/portal/routes/system/settings/routes/proxies/table.component.ts

@@ -34,7 +34,6 @@ import { Proxy } from 'src/app/services/patch-db/data-model'
     <thead>
       <tr>
         <th>Name</th>
-        <th>Created</th>
         <th>Type</th>
         <th>Used By</th>
         <th [style.width.rem]="3.5"></th>
@@ -44,12 +43,11 @@ import { Proxy } from 'src/app/services/patch-db/data-model'
       @for (proxy of proxies; track $index) {
         <tr>
           <td class="title">{{ proxy.name }}</td>
-          <td class="date">{{ proxy.createdAt | date: 'medium' }}</td>
           <td class="type">{{ proxy.type }}</td>
           <td class="used">
             @if (getLength(proxy); as length) {
               <button tuiLink (click)="onUsedBy(proxy)">
-                Connections: {{ length }}
+                Used by: {{ length }}
               </button>
             } @else {
               N/A
@@ -109,12 +107,6 @@ import { Proxy } from 'src/app/services/patch-db/data-model'
         text-align: right;
       }
 
-      .date {
-        order: 5;
-        grid-column: span 2;
-        color: var(--tui-text-02);
-      }
-
       .type {
         order: 3;
       }

web/projects/ui/src/styles.scss

@@ -78,6 +78,7 @@ hr {
     height: 2rem;
     padding: 0 0.25rem;
     box-shadow: inset 0 -1px var(--tui-clear);
+    text-overflow: ellipsis;
   }
 
   th {