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] 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 {