Fixed Advanced Widget Style Editor rendering (#15803)

* Fixed Advanced Widget Style Editor rendering

(cherry picked from commit 32ddf4336b)

* Moved styles to class for styles consistency

(cherry picked from commit 0b306159ba)

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

@@ -29,7 +29,7 @@
     <div *ngIf="displayData" [class.!hidden]="selectedOption !== 'data'" class="mat-content">
       <ng-container *ngTemplateOutlet="data"></ng-container>
     </div>
-    <div [class.!hidden]="selectedOption !== 'appearance'" class="mat-content">
+    <div [class.!hidden]="selectedOption !== 'appearance'" class="mat-content tb-widget-config-fill">
       <ng-container *ngTemplateOutlet="appearance"></ng-container>
     </div>
     <div [class.!hidden]="selectedOption !== 'card'" [formGroup]="widgetSettings" class="mat-content">
@@ -213,7 +213,7 @@
   </div>
   <ng-template #basicMode>
     <div class="tb-widget-config-content">
-      <div class="mat-content" *ngIf="hasBasicModeDirective; else basicModeContent">
+      <div class="mat-content tb-widget-config-fill" *ngIf="hasBasicModeDirective; else basicModeContent">
         <ng-container #basicModeContainer></ng-container>
         <div class="tb-basic-mode-directive-error" *ngIf="basicModeDirectiveError">{{basicModeDirectiveError}}</div>
       </div>

ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss

@@ -43,7 +43,9 @@
   }
   .tb-widget-config-content {
     & > .mat-content {
-      height: 100%;
+      &.tb-widget-config-fill {
+        height: 100%;
+      }
       padding-top: 8px;
       @media #{$mat-xs} {
         padding-left: 8px;