From 04a7264765116224a24962a206ecf24b9952ae7e Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Thu, 16 Apr 2026 09:49:30 +0200
Subject: [PATCH] Changed placement position of toasts on Scada and Action
 widgets

---
 .../widget/lib/action/action-widget.models.ts       |  7 ++++++-
 .../lib/scada/scada-symbol-widget.component.ts      | 13 +++++++++++--
 .../app/shared/components/snack-bar-component.html  |  1 +
 .../app/shared/components/snack-bar-component.scss  |  3 +++
 ui-ngx/src/app/shared/components/toast.directive.ts |  3 +++
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
index 3dacd1857b..c94739cec2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/action/action-widget.models.ts
@@ -59,6 +59,7 @@ import { parseError } from '@shared/models/error.models';
 import { CompiledTbFunction, compileTbFunction } from '@shared/models/js-function.models';
 import { HttpClient } from '@angular/common/http';
 import { StateObject } from '@core/api/widget-api.models';
+import { TOAST_PANEL_MIN_HEIGHT, TOAST_PANEL_MIN_WIDTH } from '@shared/components/toast.directive';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -146,7 +147,11 @@ export abstract class BasicActionWidgetComponent implements OnInit, OnDestroy, A
   }
 
   private onError(error: string) {
-    this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true);
+    const widgetElement = this.ctx.$widgetElement[0];
+    const isFit = widgetElement.offsetHeight >= TOAST_PANEL_MIN_HEIGHT || widgetElement.offsetWidth >= TOAST_PANEL_MIN_WIDTH;
+    const verticalPosition = isFit ? 'bottom' : 'top';
+    const horizontalPosition = isFit ? 'center' : 'right';
+    this.ctx.showErrorToast(error, verticalPosition, horizontalPosition, this.ctx.toastTargetId, true);
   }
 
   protected updateValue<V>(valueSetter: ValueSetter<V>,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts
index 5e13120800..896acff688 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol-widget.component.ts
@@ -42,6 +42,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { catchError, share } from 'rxjs/operators';
 import { MatIconRegistry } from '@angular/material/icon';
 import { RafService } from '@core/services/raf.service';
+import { TOAST_PANEL_MIN_HEIGHT, TOAST_PANEL_MIN_WIDTH } from '@shared/components/toast.directive';
 
 @Component({
     selector: 'tb-scada-symbol-widget',
@@ -127,11 +128,19 @@ export class ScadaSymbolWidgetComponent implements OnInit, AfterViewInit, OnDest
   }
 
   onScadaSymbolObjectError(error: string) {
-    this.ctx.showErrorToast(error, 'bottom', 'center', this.ctx.toastTargetId, true);
+    const scadaSymbolNativeElement = this.scadaSymbolShape.nativeElement;
+    const isFit = scadaSymbolNativeElement.offsetHeight >= TOAST_PANEL_MIN_HEIGHT || scadaSymbolNativeElement.offsetWidth >= TOAST_PANEL_MIN_WIDTH;
+    const verticalPosition = isFit ? 'bottom' : 'top';
+    const horizontalPosition = isFit ? 'center' : 'right';
+    this.ctx.showErrorToast(error, verticalPosition, horizontalPosition, this.ctx.toastTargetId, true);
   }
 
   onScadaSymbolObjectMessage(message: string) {
-    this.ctx.showSuccessToast(message, 3000, 'bottom', 'center', this.ctx.toastTargetId, true);
+    const scadaSymbolNativeElement = this.scadaSymbolShape.nativeElement;
+    const isFit = scadaSymbolNativeElement.offsetHeight >= TOAST_PANEL_MIN_HEIGHT || scadaSymbolNativeElement.offsetWidth >= TOAST_PANEL_MIN_WIDTH;
+    const verticalPosition = isFit ? 'bottom' : 'top';
+    const horizontalPosition = isFit ? 'center' : 'right';
+    this.ctx.showSuccessToast(message, 3000, verticalPosition, horizontalPosition, this.ctx.toastTargetId, true);
   }
 
   private initObject(rootElement: HTMLElement,
diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.html b/ui-ngx/src/app/shared/components/snack-bar-component.html
index 2197cebdcc..1e738ab670 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.html
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.html
@@ -30,6 +30,7 @@
   </ng-container>
   <ng-template #modern>
     <div class="tb-modern-toast-panel"
+         [class.top]="notification.verticalPosition === 'top'"
          [class.error-toast]="notification.type === 'error'"
          [class.warn-toast]="notification.type === 'warn'"
          [class.success-toast]="notification.type === 'success'"
diff --git a/ui-ngx/src/app/shared/components/snack-bar-component.scss b/ui-ngx/src/app/shared/components/snack-bar-component.scss
index 69c02a0a4e..23c3eaafce 100644
--- a/ui-ngx/src/app/shared/components/snack-bar-component.scss
+++ b/ui-ngx/src/app/shared/components/snack-bar-component.scss
@@ -84,6 +84,9 @@
       gap: 4px;
       border-radius: 4px;
       box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.2);
+      &.top {
+        align-items: flex-start;
+      }
       &.info-toast {
         background: #e6e6e6;
         color: rgba(50, 50, 50, 1);
diff --git a/ui-ngx/src/app/shared/components/toast.directive.ts b/ui-ngx/src/app/shared/components/toast.directive.ts
index 773a6d298e..3bc873f1b0 100644
--- a/ui-ngx/src/app/shared/components/toast.directive.ts
+++ b/ui-ngx/src/app/shared/components/toast.directive.ts
@@ -37,6 +37,9 @@ import { MediaBreakpoints } from '@shared/models/constants';
 import { MatButton } from '@angular/material/button';
 import Timeout = NodeJS.Timeout;
 
+export const TOAST_PANEL_MIN_WIDTH = 80;
+export const TOAST_PANEL_MIN_HEIGHT = 120;
+
 @Directive({
     selector: '[tb-toast]',
     standalone: false