Update style

ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html

@@ -85,51 +85,53 @@
                           formControlName="entityId">
         </tb-entity-select>
       </section>
-      <div formGroupName="keys">
-        <mat-expansion-panel formGroupName="attributes" [expanded]="true">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-panel-title" translate>entity-view.attributes-propagation</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
-          <label translate class="tb-title no-padding">entity-view.client-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="cs"
-            keysText="entity-view.client-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-          <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="sh"
-            keysText="entity-view.shared-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-          <label translate class="tb-title no-padding">entity-view.server-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="ss"
-            keysText="entity-view.server-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-        </mat-expansion-panel>
-        <mat-expansion-panel [expanded]="true">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-panel-title" translate>entity-view.timeseries-data</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
-          <label translate class="tb-title no-padding">entity-view.timeseries</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="timeseries"
-            keysText="entity-view.timeseries-placeholder"
-            [dataKeyType]="dataKeyType.timeseries">
-          </tb-entity-keys-list>
-        </mat-expansion-panel>
+      <div class="mat-accordion-container" formGroupName="keys">
+        <mat-accordion [multi]="true">
+          <mat-expansion-panel formGroupName="attributes" [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-panel-title" translate>entity-view.attributes-propagation</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
+            <label translate class="tb-title no-padding">entity-view.client-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="cs"
+              keysText="entity-view.client-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+            <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="sh"
+              keysText="entity-view.shared-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+            <label translate class="tb-title no-padding">entity-view.server-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="ss"
+              keysText="entity-view.server-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+          </mat-expansion-panel>
+          <mat-expansion-panel [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-panel-title" translate>entity-view.timeseries-data</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
+            <label translate class="tb-title no-padding">entity-view.timeseries</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="timeseries"
+              keysText="entity-view.timeseries-placeholder"
+              [dataKeyType]="dataKeyType.timeseries">
+            </tb-entity-keys-list>
+          </mat-expansion-panel>
+        </mat-accordion>
       </div>
       <tb-datetime
         dateText="entity-view.start-date"

ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.scss

@@ -14,16 +14,7 @@
  * limitations under the License.
  */
 :host {
-  mat-expansion-panel {
+  .mat-accordion-container {
     margin-bottom: 16px;
   }
 }
-
-.tb-dialog {
-  :host {
-    mat-expansion-panel {
-      margin-left: 6px;
-      margin-right: 6px;
-    }
-  }
-}

ui-ngx/src/app/modules/home/pages/tenant/tenant.component.scss

@@ -14,9 +14,15 @@
  * limitations under the License.
  */
 :host ::ng-deep {
-  .mat-checkbox.hinted-checkbox {
-    .mat-checkbox-inner-container {
-      margin-top: 4px;
+  .mat-checkbox{
+    &.hinted-checkbox {
+      .mat-checkbox-inner-container {
+        margin-top: 4px;
+      }
+    }
+
+    .mat-checkbox-layout{
+      white-space: normal;
     }
   }
 }

ui-ngx/src/styles.scss

@@ -812,7 +812,6 @@ mat-label {
         min-width: 100%;
         display: flex;
         flex-direction: column;
-        overflow: auto;
       }
       .mat-dialog-content {
         margin: 0;
@@ -862,7 +861,7 @@ mat-label {
       .mat-dialog-container {
         > *:first-child, form {
           min-width: 100% !important;
-          height: 100vh;
+          height: 100%;
         }
         .mat-dialog-content {
           max-height: 100%;