From 6c1b03dc47203c9918e7ca03e0a5ec57b1d22279 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 28 Aug 2024 17:57:47 +0300
Subject: [PATCH] UI: Fixed incorrect min-width calculation for dashboard
 layout in edit preview mode at specific breakpoints

---
 .../dashboard-page.component.ts               | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 0d379b1623..5edd69bb7f 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -759,6 +759,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     const prevMainLayoutWidth = this.mainLayoutSize.width;
     const prevMainLayoutHeight = this.mainLayoutSize.height;
     const prevMainLayoutMaxWidth = this.mainLayoutSize.maxWidth;
+    const prevMainLayoutMinWidth = this.mainLayoutSize.minWidth;
     if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') {
       this.mainLayoutSize.width = '100%';
     } else {
@@ -773,19 +774,19 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       const xOffset = this.dashboardContainer.nativeElement.getBoundingClientRect().x;
       const breakpoint = this.dashboardUtils.getBreakpointInfoById(this.layouts.main.layoutCtx.breakpoint);
 
-      let maxWidth: string;
-      if (breakpoint?.maxWidth) {
-        if (this.isMobileSize(breakpoint)) {
-          maxWidth = `${breakpoint.maxWidth}px`;
-        } else {
-          maxWidth = `${breakpoint.maxWidth - xOffset}px`;
+      let maxWidth = '100%';
+      let minWidth: string;
+
+      if (breakpoint) {
+        const isMobile = this.isMobileSize(breakpoint);
+        if (breakpoint.maxWidth) {
+          maxWidth = isMobile ? `${breakpoint.maxWidth}px` : `${breakpoint.maxWidth - xOffset}px`;
+        }
+        if (breakpoint.minWidth) {
+          minWidth = isMobile ? `${breakpoint.minWidth}px` : `${breakpoint.minWidth - xOffset}px`;
         }
-      } else {
-        maxWidth = '100%';
       }
 
-      const minWidth = breakpoint?.minWidth ? `${breakpoint.minWidth}px` : undefined;
-
       this.mainLayoutSize.maxWidth = maxWidth;
       this.mainLayoutSize.minWidth = minWidth;
     } else {
@@ -793,7 +794,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       this.mainLayoutSize.minWidth = undefined;
     }
     return prevMainLayoutWidth !== this.mainLayoutSize.width || prevMainLayoutHeight !== this.mainLayoutSize.height ||
-      prevMainLayoutMaxWidth !== this.mainLayoutSize.maxWidth;
+      prevMainLayoutMaxWidth !== this.mainLayoutSize.maxWidth || prevMainLayoutMinWidth !== this.mainLayoutSize.minWidth;
   }
 
   private updateRightLayoutSize(): boolean {