Merge pull request #14735 from abpframework/issue/1368

Fix Toaster padding-right on mobile

npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss

@@ -11,3 +11,8 @@
     flex-direction: column-reverse;
   }
 }
+@media only screen and (max-width: 768px) {
+  .abp-toast-container {
+    min-width: 100%;
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnInit } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { toastInOut } from '../../animations/toast.animations';
 import { Toaster } from '../../models/toaster';
@@ -21,6 +21,8 @@ export class ToastContainerComponent implements OnInit {
 
   @Input()
   right = '30px';
+  defaultRight = '30px';
+  defaultMobileRight = '0';
 
   @Input()
   bottom = '30px';
@@ -32,6 +34,7 @@ export class ToastContainerComponent implements OnInit {
   toastKey?: string;
 
   ngOnInit() {
+    this.setDefaultRight();
     this.toasts$.subscribe(toasts => {
       this.toasts = this.toastKey
         ? toasts.filter(t => {
@@ -41,6 +44,18 @@ export class ToastContainerComponent implements OnInit {
     });
   }
 
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.setDefaultRight();
+  }
+
+  setDefaultRight() {
+    const screenWidth = window.innerWidth;
+    if (screenWidth < 768 && this.right == this.defaultRight) {
+      this.right = this.defaultMobileRight;
+    }
+  }
+
   trackByFunc(index: number, toast: Toaster.Toast) {
     if (!toast) return null;
     return toast.options?.id;