diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 097cf59c7f..641755b810 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/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" style="height: 100%;">
+    <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">
@@ -227,7 +227,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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
index 212bc0724a..8df18b25bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
@@ -43,6 +43,9 @@
   }
   .tb-widget-config-content {
     & > .mat-content {
+      &.tb-widget-config-fill {
+        height: 100%;
+      }
       padding-top: 8px;
       @media #{$mat-xs} {
         padding-left: 8px;