UI: Minor change style in notification

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss

@@ -16,7 +16,7 @@
 @import "../../../../../../scss/constants";
 
 :host {
-  width: 850px;
+  width: 780px;
   height: 100%;
   max-width: 100%;
   max-height: 100vh;
@@ -206,6 +206,7 @@
 
       .mat-horizontal-stepper-wrapper {
         flex: 1 1 100%;
+        width: 100%;
       }
 
       .mat-horizontal-content-container {

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts

@@ -98,7 +98,7 @@ export class SentNotificationDialogComponent extends
       }
     });
 
-    this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-xs'])
+    this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-sm'])
       .pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
 
     this.notificationRequestForm = this.fb.group({

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss

@@ -17,7 +17,7 @@
 @import "../../../../../../theme";
 
 :host {
-  width: 850px;
+  width: 780px;
   height: 100%;
   max-width: 100%;
   max-height: 100vh;
@@ -83,6 +83,7 @@
 
       .mat-horizontal-stepper-wrapper {
         flex: 1 1 100%;
+        width: 100%;
       }
 
       .mat-horizontal-content-container {

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts

@@ -78,7 +78,7 @@ export class TemplateNotificationDialogComponent
 
     this.notificationTypes = this.allowNotificationType();
 
-    this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-xs'])
+    this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-sm'])
       .pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
 
     if (isDefinedAndNotNull(this.data?.predefinedType)) {