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

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;

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);
-      }
     }
   }
 }