From 8e88ad30fc2b41c5a76303296cacf56fe44ad802 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 9 Apr 2026 10:38:18 +0300
Subject: [PATCH] Refine add item dialog sizing, browse drawer backdrop, and
 add mode grid

- Add item dialog: 80vw width (gt-xs), 1000px (gt-md), 80vh height,
  overflow-x hidden, tb-iot-hub-browse height 100%
- Browse: ::ng-deep for mat-drawer-backdrop styles, bottom 0 in add mode
- Add mode: compact cards always 1 column (outside media queries)
- Updated calculated fields hero SVG asset
---
 .../iot-hub-add-item-dialog.component.scss     |  9 +++++++++
 .../iot-hub/iot-hub-browse.component.scss      | 18 +++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
index 172b0a420a..831b8f8e92 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss
@@ -21,6 +21,15 @@
     position: relative;
     padding: 0;
     overflow-x: hidden;
+    height: 80vh;
+
+    tb-iot-hub-browse {
+      height: 100%;
+    }
+
+    @media #{$mat-gt-xs} {
+      width: 80vw;
+    }
 
     @media #{$mat-gt-md} {
       width: 1000px;
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
index 526b917297..c031c1bd62 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss
@@ -53,9 +53,13 @@
   background: transparent;
   overflow: visible;
 
-  .mat-drawer-backdrop {
+  ::ng-deep .mat-drawer-backdrop {
     bottom: -48px;
 
+    .add-mode & {
+      bottom: 0;
+    }
+
     &.mat-drawer-shown {
       background: transparent;
     }
@@ -566,23 +570,19 @@
 
 // Add mode responsive overrides
 .add-mode {
+  .tb-iot-hub-card-grid.tb-iot-hub-card-grid-compact {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
   @media #{$mat-gt-sm} {
     .tb-iot-hub-card-grid {
       grid-template-columns: repeat(2, 1fr);
-
-      &.tb-iot-hub-card-grid-compact {
-        grid-template-columns: repeat(1, 1fr);
-      }
     }
   }
 
   @media #{$mat-lt-md} {
     .tb-iot-hub-card-grid {
       grid-template-columns: repeat(1, 1fr);
-
-      &.tb-iot-hub-card-grid-compact {
-        grid-template-columns: repeat(1, 1fr);
-      }
     }
   }
 }