From bc296d698e5a4c7a43556a704487a5b24f260679 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 19 Aug 2024 15:25:04 +0300
Subject: [PATCH 1/2] UI: Fixed adaptive manage layout dialog

---
 .../layout/manage-dashboard-layouts-dialog.component.html       | 2 +-
 .../layout/manage-dashboard-layouts-dialog.component.scss       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index 5df01bccef..961f6b4846 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/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 style="min-width: 300px; padding: 16px">
     <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>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
index 8c192bcca5..d18a48fbaf 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/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;
 

From d7ba724f6a14cf340dae8819cb3574e6a9afe987 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 19 Aug 2024 17:20:53 +0300
Subject: [PATCH 2/2] UI: Fixed adaptive manage layout dialog

---
 .../layout/add-new-breakpoint-dialog.component.html       | 2 +-
 .../layout/manage-dashboard-layouts-dialog.component.html | 2 +-
 .../layout/manage-dashboard-layouts-dialog.component.scss | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index edb87a6f79..8baab0f295 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index 961f6b4846..71adbc91c8 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/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; padding: 16px">
+  <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>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
index d18a48fbaf..0933cafaff 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
@@ -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 {