dev #14384 Правка ошибок отображения WPA КофеЛайк: fix issue

angular/src/app/directives/directives.module.ts

@@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FocusNextInputDirective } from './focus-next-input.directive';
 import { DownloadAppDirective } from './download-app.directive';
+import { UpdateOutlineGapDirective } from './update-outline-gap.directive';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [FocusNextInputDirective, DownloadAppDirective],
-  exports: [FocusNextInputDirective, DownloadAppDirective]
+  declarations: [FocusNextInputDirective, DownloadAppDirective, UpdateOutlineGapDirective],
+  exports: [FocusNextInputDirective, DownloadAppDirective, UpdateOutlineGapDirective]
 })
 export class DirectivesModule { }

angular/src/app/directives/update-outline-gap.directive.ts

@@ -0,0 +1,17 @@
+import { AfterViewInit, Directive } from '@angular/core';
+import { MatFormField } from '@angular/material/form-field';
+
+// TODO: this is temporary workaround, upgrade angular to 15+, where input labels fork fine
+@Directive({
+  selector: 'mat-form-field[appearance=outline]',
+})
+export class UpdateOutlineGapDirective implements AfterViewInit {
+  constructor(private formField: MatFormField) {
+  }
+
+  ngAfterViewInit() {
+    document.fonts.ready.then(() => {
+      this.formField.updateOutlineGap();
+    });
+  }
+}

angular/src/styles.scss

@@ -100,7 +100,7 @@ hr {
 }
 
 .mat-menu-panel {
-    background: #231f20;
+    background: var(--background-color);
     border-radius: 0;
 }