Merge pull request #11441 from vvlladd28/bug/dashboard-layout/adaptive-manage-layout

Fixed adaptive manage layout dialog

ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html

@@ -24,7 +24,7 @@
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content style="width: 400px">
+<div mat-dialog-content style="width: 400px; max-width: 100%;">
   <form [formGroup]="addBreakpointFormGroup">
     <mat-form-field appearance="outline">
       <mat-label translate>layout.breakpoint</mat-label>

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html

@@ -25,7 +25,7 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content style="min-width: 300px; overflow: hidden;">
+  <div mat-dialog-content>
     <section class="tb-form-panel no-padding no-border">
       <div class="tb-form-row space-between">
         <div class="fixed-title-width" translate>dashboard.layout</div>

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss

@@ -34,7 +34,7 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
   }
 
   .tb-layout-preview {
-    width: 120%;
+    width: 100%;
     background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.6);
     padding: 35px;
 
@@ -185,6 +185,14 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
   }
 }
 
+:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
+  .mat-mdc-dialog-content {
+    width: 550px;
+    max-width: 100%;
+    padding: 16px;
+  }
+}
+
 ::ng-deep {
   /* Alarm tooltip with side-to-side movement */
   .tb-layout-error-tooltip-right {