angular update 14.1.2

src/app/modules/presentation/remote/remote.component.less

@@ -13,7 +13,8 @@
     padding: 10px 20px;
     border-radius: 0;
     box-sizing: border-box;
-    margin: 0 -20px 10px;
+    margin: -11px -20px 10px;
+    border: 1px solid #ddd;
   }
 }
 
@@ -43,16 +44,16 @@
   overflow: hidden;
   transition: 300ms all ease-in-out;
   cursor: pointer;
-  outline: 0.5px solid #f4f4f4;
+  outline: 0.5px solid #eee;
 
   &:hover {
     .card-1;
-    outline: 0px solid transparent;
+    outline: 0 solid transparent;
   }
 
   &.active {
     .card-2;
-    outline: 0px solid transparent;
+    outline: 0 solid transparent;
 
     .head {
       background: #4286f4;
@@ -66,7 +67,7 @@
 
 .head {
   transition: 300ms all ease-in-out;
-  background: #f4f4f4;
+  background: #eee;
   padding: 10px;
   font-weight: bold;
 }
@@ -81,7 +82,7 @@
   grid-template-columns: min-content min-content auto;
 
   @media screen and (max-width: 860px) {
-    gap: 0;
+    gap: 10px;
     grid-template-columns: auto;
   }
 

src/app/modules/presentation/remote/remote.component.ts

@@ -8,7 +8,7 @@ import {faDesktop} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {delay} from '../../../services/delay';
@@ -38,7 +38,7 @@ export class RemoteComponent {
   public progress = false;
 
   public faDesktop = faDesktop;
-  public showControl = new FormControl();
+  public showControl = new UntypedFormControl();
 
   public trackBy(index: number, item: PresentationSong): string {
     return item.id;