chore: address comments

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

@@ -28,7 +28,7 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
               @if (current.id === job.id) {
                 <span [style.color]="'var(--tui-positive)'">Running</span>
               } @else {
-                {{ job.next | date: 'MMM d, y, h:mm a' }}
+                {{ job.next | date: 'medium' }}
               }
             </td>
             <td class="name">{{ job.name }}</td>
@@ -59,7 +59,11 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
       grid-template-columns: 1fr 1fr;
     }
 
-    .date,
+    .date {
+      order: 1;
+      grid-column: span 2;
+    }
+
     .name {
       grid-column: span 2;
     }

web/projects/ui/src/app/routes/portal/routes/system/backups/modals/history.component.ts

@@ -9,10 +9,12 @@ import { FormsModule } from '@angular/forms'
 import { ErrorService, LoadingService } from '@start9labs/shared'
 import { ALWAYS_FALSE_HANDLER, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk'
 import { TuiDialogService, TuiLinkModule } from '@taiga-ui/core'
-import { TuiButtonModule, TuiIconModule } from '@taiga-ui/experimental'
+import {
-import { TuiCheckboxModule } from '@taiga-ui/kit'
+  TuiButtonModule,
+  TuiCheckboxModule,
+  TuiIconModule,
+} from '@taiga-ui/experimental'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
-import { BehaviorSubject } from 'rxjs'
 import { REPORT } from 'src/app/components/report.component'
 import { BackupRun } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
@@ -37,7 +39,10 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
       <thead>
         <tr>
           <th>
-            <tui-checkbox
+            <input
+              type="checkbox"
+              size="s"
+              tuiCheckbox
               [disabled]="!selected.length"
               [ngModel]="all"
               (ngModelChange)="toggle()"
@@ -52,9 +57,16 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
       </thead>
       <tbody>
         @for (run of runs(); track $index) {
-          <tr [style.background]="selected[$index] ? 'var(--tui-clear)' : ''">
+          <tr>
-            <td><tui-checkbox [(ngModel)]="selected[$index]" /></td>
+            <td class="checkbox">
-            <td>{{ run.startedAt | date: 'medium' }}</td>
+              <input
+                type="checkbox"
+                tuiCheckbox
+                size="s"
+                [(ngModel)]="selected[$index]"
+              />
+            </td>
+            <td class="date">{{ run.startedAt | date: 'medium' }}</td>
             <td class="duration">
               {{ run.startedAt | duration: run.completedAt }} minutes
             </td>
@@ -67,7 +79,7 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
               }
               <button tuiLink (click)="showReport(run)">Report</button>
             </td>
-            <td [style.grid-column]="'span 3'">
+            <td [style.grid-column]="'span 2'">
               <tui-icon [icon]="run.job.target.type | getBackupIcon" />
               {{ run.job.target.name }}
             </td>
@@ -87,27 +99,50 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
     </table>
   `,
   styles: `
+    @import '@taiga-ui/core/styles/taiga-ui-local';
+
     tui-icon {
       font-size: 1rem;
       vertical-align: sub;
       margin-inline-end: 0.25rem;
     }
 
+    button {
+      position: relative;
+    }
+
+    [tuiCheckbox] {
+      display: block;
+    }
+
     :host-context(tui-root._mobile) {
       tr {
-        grid-template-columns: 1.75rem 1fr 7rem;
+        grid-template-columns: 1fr 7rem;
       }
 
       td:only-child {
-        grid-column: span 3;
+        grid-column: span 2;
+      }
+
+      .checkbox {
+        @include fullsize();
+
+        [tuiCheckbox] {
+          @include fullsize();
+          opacity: 0;
+        }
       }
 
       .title {
-        grid-column: span 2;
         font-weight: bold;
         text-transform: uppercase;
       }
 
+      .date,
+      .duration {
+        color: var(--tui-text-02);
+      }
+
       .duration,
       .result {
         text-align: right;
@@ -120,12 +155,12 @@ import { HasErrorPipe } from '../pipes/has-error.pipe'
     CommonModule,
     FormsModule,
     TuiButtonModule,
-    TuiCheckboxModule,
     TuiIconModule,
     TuiLinkModule,
     DurationPipe,
     HasErrorPipe,
     GetBackupIconPipe,
+    TuiCheckboxModule,
   ],
 })
 export class BackupsHistoryModal {

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

@@ -23,7 +23,7 @@ import { toRouterLink } from 'src/app/utils/to-router-link'
   template: `
     <td class="checkbox"><ng-content /></td>
     <td class="date">
-      {{ notificationItem.createdAt | date: 'MMM d, y, h:mm a' }}
+      {{ notificationItem.createdAt | date: 'medium' }}
     </td>
     <td class="title" [style.color]="color">
       <tui-icon [icon]="icon" [style.font-size.rem]="1" />
@@ -64,28 +64,36 @@ import { toRouterLink } from 'src/app/utils/to-router-link'
     '[class._new]': '!notificationItem.read',
   },
   styles: `
+    @import '@taiga-ui/core/styles/taiga-ui-local';
+
     :host {
-      grid-template-columns: 1.75rem 1fr;
+      grid-template-columns: 1fr;
 
       &._new {
         background: var(--tui-clear) !important;
       }
     }
 
+    button {
+      position: relative;
+    }
+
     td {
-      grid-column: span 2;
       padding: 0.25rem;
       vertical-align: top;
     }
 
     .checkbox {
-      grid-column: span 1;
       padding-top: 0.4rem;
     }
 
     :host-context(tui-root._mobile) {
+      .checkbox {
+        @include fullsize();
+      }
+
       .date {
-        grid-column: span 1;
+        order: 1;
         color: var(--tui-text-02);
       }
 

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

@@ -66,6 +66,14 @@ import { NotificationItemComponent } from './item.component'
       }
     </tbody>
   `,
+  styles: `
+    @import '@taiga-ui/core/styles/taiga-ui-local';
+
+    :host-context(tui-root._mobile) input {
+      @include fullsize();
+      opacity: 0;
+    }
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

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

@@ -28,7 +28,7 @@ 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: 'short' }}</td>
+          <td class="date">{{ domain.createdAt | date: 'medium' }}</td>
           <td class="provider">{{ domain.provider }}</td>
           <td class="strategy">{{ getStrategy(domain) }}</td>
           <td class="used">

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

@@ -44,7 +44,7 @@ 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: 'short' }}</td>
+          <td class="date">{{ proxy.createdAt | date: 'medium' }}</td>
           <td class="type">{{ proxy.type }}</td>
           <td class="used">
             @if (getLength(proxy); as length) {
@@ -110,17 +110,17 @@ import { Proxy } from 'src/app/services/patch-db/data-model'
       }
 
       .date {
-        order: 3;
+        order: 5;
         grid-column: span 2;
         color: var(--tui-text-02);
       }
 
       .type {
-        order: 4;
+        order: 3;
       }
 
       .used {
-        order: 5;
+        order: 4;
         text-align: right;
 
         &:not(:has(button)) {

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

@@ -77,6 +77,8 @@ import { PlatformInfoPipe } from './platform-info.pipe'
   `,
   styles: [
     `
+      @import '@taiga-ui/core/styles/taiga-ui-local';
+
       input {
         position: absolute;
         top: 50%;
@@ -85,6 +87,17 @@ import { PlatformInfoPipe } from './platform-info.pipe'
       }
 
       :host-context(tui-root._mobile) {
+        input {
+          @include fullsize();
+          z-index: 1;
+          opacity: 0;
+          transform: none;
+        }
+
+        td:first-child {
+          padding: 0 0.25rem !important;
+        }
+
         .agent {
           white-space: nowrap;
           display: block;

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

@@ -81,18 +81,19 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
         text-align: right;
       }
 
-      .date {
+      .fingerprint {
         order: 3;
+        grid-column: span 2;
+      }
+
+      .date {
+        order: 4;
+        color: var(--tui-text-02);
       }
 
       .algorithm {
-        order: 4;
-        text-align: right;
-      }
-
-      .fingerprint {
         order: 5;
-        grid-column: span 2;
+        text-align: right;
         color: var(--tui-text-02);
       }
     }

web/projects/ui/src/styles.scss

@@ -103,6 +103,7 @@ tui-root._mobile .g-table {
   }
 
   tr {
+    position: relative;
     display: grid;
     border-radius: var(--tui-radius-l);
     padding: 0.75rem 1rem;
@@ -110,8 +111,13 @@ tui-root._mobile .g-table {
     background: rgba(0, 0, 0, 0.2);
   }
 
+  tr:has(:checked) {
+    box-shadow: inset 0 0 0 0.125rem var(--tui-primary);
+  }
+
   td,
   th {
+    position: static;
     height: auto;
     min-height: 2rem;
     align-content: center;