The callouts are merged visually if zooming in is 175% and more

modules/ui/src/app/app.component.html

@@ -125,7 +125,10 @@ <h1 class="main-heading">Testrun</h1>
       </mat-toolbar>
       <div class="app-content-main" role="main" id="main">
         <ng-container *ngIf="vm.settingMissedError as error">
-          <app-callout [type]="CalloutType.Error" *ngIf="error.isSettingMissed">
+          <app-callout
+            appDynamicTop
+            [type]="CalloutType.Error"
+            *ngIf="error.isSettingMissed">
             <ng-container
               *ngIf="
                 error.devicePortMissed && error.internetPortMissed;
@@ -155,6 +158,7 @@ <h1 class="main-heading">Testrun</h1>
           </app-callout>
         </ng-container>
         <app-callout
+          appDynamicTop
           [type]="CalloutType.Info"
           *ngIf="vm.hasConnectionSettings === false">
           Step 1: To perform a device test, please, select ports in
@@ -171,6 +175,7 @@ <h1 class="main-heading">Testrun</h1>
           panel.
         </app-callout>
         <app-callout
+          appDynamicTop
           [type]="CalloutType.Info"
           *ngIf="
             vm.hasConnectionSettings === true &&
@@ -192,6 +197,7 @@ <h1 class="main-heading">Testrun</h1>
           first.
         </app-callout>
         <app-callout
+          appDynamicTop
           [type]="CalloutType.Info"
           *ngIf="
             vm.hasConnectionSettings === true &&
@@ -214,6 +220,7 @@ <h1 class="main-heading">Testrun</h1>
           >.
         </app-callout>
         <app-callout
+          appDynamicTop
           role="alert"
           aria-live="assertive"
           [type]="CalloutType.Check"

modules/ui/src/app/app.module.ts

@@ -52,6 +52,7 @@ import { LOADER_TIMEOUT_CONFIG_TOKEN } from './services/loaderConfig';
 import { WifiComponent } from './components/wifi/wifi.component';
 
 import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt';
+import { DynamicTopDirective } from './components/callout/dynamic-top.directive';
 
 export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
   hostname: window.location.hostname,
@@ -89,6 +90,7 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
     CertificatesComponent,
     MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
     WifiComponent,
+    DynamicTopDirective,
   ],
   providers: [
     WindowProvider,

modules/ui/src/app/components/callout/callout.component.scss

@@ -27,10 +27,6 @@
   position: absolute;
 }
 
-:host + ::ng-deep app-callout {
-  top: 60px;
-}
-
 :host .info-pilot ::ng-deep app-program-type-icon {
   padding-right: 1px;
 
@@ -41,18 +37,6 @@
   }
 }
 
-@media (width < 742px) {
-  :host + ::ng-deep app-callout {
-    top: 80px;
-  }
-}
-
-@media (width < 490px) {
-  :host + ::ng-deep app-callout {
-    top: 100px;
-  }
-}
-
 .callout-container {
   display: flex;
   box-sizing: border-box;

modules/ui/src/app/components/callout/dynamic-top.directive.ts

@@ -0,0 +1,39 @@
+import { AfterViewInit, Directive, Renderer2, ElementRef } from '@angular/core';
+import { fromEvent } from 'rxjs';
+
+@Directive({
+  selector: '[appDynamicTop]',
+  standalone: true,
+})
+export class DynamicTopDirective implements AfterViewInit {
+  constructor(
+    private renderer: Renderer2,
+    private element: ElementRef
+  ) {
+    fromEvent(window, 'resize').subscribe(() => this.setTop());
+  }
+
+  ngAfterViewInit() {
+    this.setTop();
+  }
+
+  private setTop() {
+    const firstCallout =
+      this.element.nativeElement.parentNode?.firstElementChild;
+    if (firstCallout === this.element.nativeElement) {
+      const next = this.element.nativeElement.nextElementSibling;
+      let el = next.nodeName === 'APP-CALLOUT' ? next : null;
+      while (el) {
+        this.renderer.setStyle(
+          el,
+          'top',
+          `${firstCallout.offsetHeight - 36}px`
+        );
+        el =
+          el.nextElementSibling.nodeName === 'APP-CALLOUT'
+            ? el.nextElementSibling
+            : null;
+      }
+    }
+  }
+}