From 5ba7304259e7bc57bde025696cef1dd93b2f482f Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Thu, 18 Jun 2026 15:57:58 +0200
Subject: [PATCH] Fixed Advanced Widget Style Editor rendering (#15803)

* Fixed Advanced Widget Style Editor rendering

(cherry picked from commit 32ddf4336b32579f4b5d9b07f30148f7e068bde4)

* Moved styles to class for styles consistency

(cherry picked from commit 0b306159ba074415d9d7699614f5b4d9f0272157)
---
 .../home/components/widget/widget-config.component.html       | 4 ++--
 .../home/components/widget/widget-config.component.scss       | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

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 f35a1f9ae1..b09929d917 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">
+    <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>
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 af7e27f481..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,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;