From 864ba221eacfb300382e12fcc9be7e16a1cab6de Mon Sep 17 00:00:00 2001
From: d2eight <dzolotarenko@thingsboard.io>
Date: Mon, 29 Jul 2024 19:38:13 +0300
Subject: [PATCH 1/4] Card-padding for some widgets

---
 .../value-card-basic-config.component.html    |  6 ++
 .../value-card-basic-config.component.ts      |  2 +
 .../status-widget-basic-config.component.html |  6 ++
 .../status-widget-basic-config.component.ts   |  5 +-
 .../single-switch-basic-config.component.html |  6 ++
 .../single-switch-basic-config.component.ts   |  2 +
 ...peed-direction-basic-config.component.html |  6 ++
 ...-speed-direction-basic-config.component.ts |  2 +
 .../cards/value-card-widget.component.html    | 56 +++++++++----------
 .../lib/cards/value-card-widget.component.ts  | 17 +++++-
 .../lib/cards/value-card-widget.models.ts     |  4 +-
 .../indicator/status-widget.component.html    |  2 +-
 .../indicator/status-widget.component.scss    |  1 -
 .../lib/indicator/status-widget.component.ts  | 16 +++++-
 .../lib/indicator/status-widget.models.ts     |  4 +-
 .../rpc/single-switch-widget.component.html   |  2 +-
 .../lib/rpc/single-switch-widget.component.ts | 16 +++++-
 .../lib/rpc/single-switch-widget.models.ts    |  4 +-
 .../value-card-widget-settings.component.html |  6 ++
 .../value-card-widget-settings.component.ts   |  3 +-
 ...ngle-switch-widget-settings.component.html |  6 ++
 ...single-switch-widget-settings.component.ts |  3 +-
 .../status-widget-settings.component.html     |  6 ++
 .../status-widget-settings.component.ts       |  3 +-
 ...d-direction-widget-settings.component.html |  6 ++
 ...eed-direction-widget-settings.component.ts |  3 +-
 ...wind-speed-direction-widget.component.html |  2 +-
 .../wind-speed-direction-widget.component.ts  |  2 +
 .../wind-speed-direction-widget.models.ts     |  4 +-
 29 files changed, 151 insertions(+), 50 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 44e288d2e0..c1f0d7e635 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -126,6 +126,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
index 0bffd39ce4..5f14b7569e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
@@ -144,6 +144,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -183,6 +184,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index 57eb184009..2370d5bdbb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -94,6 +94,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
       formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
index d2110026f6..c54df3321c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
@@ -29,7 +29,7 @@ import {
   statusWidgetLayoutImages,
   statusWidgetLayouts,
   statusWidgetLayoutTranslations,
-  StatusWidgetSettings
+  StatusWidgetSettings, StatusWidgetStateSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 
 @Component({
@@ -66,6 +66,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
     const settings: StatusWidgetSettings = {...statusWidgetDefaultSettings, ...(configData.config.settings || {})};
+
     this.statusWidgetConfigForm = this.fb.group({
       targetDevice: [configData.config.targetDevice, []],
 
@@ -79,6 +80,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -99,6 +101,7 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index c6ac3abb45..1009057b19 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -211,6 +211,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
     <div class="tb-form-row space-between column-lt-md">
       <div translate>widget-config.show-card-buttons</div>
       <mat-chip-listbox multiple formControlName="cardButtons">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
index 75c93bc852..dfdc9e8eb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.ts
@@ -108,6 +108,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -159,6 +160,7 @@ export class SingleSwitchBasicConfigComponent extends BasicWidgetConfigComponent
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 7854a9f3b3..0dd9a2ebd9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -208,6 +208,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
     formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
index fca3bd2502..08e7003b65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
@@ -147,6 +147,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -198,6 +199,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 72598a4cdf..3d8ebd76b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -15,41 +15,41 @@
     limitations under the License.
 
 -->
-<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style]="backgroundStyle$ | async">
+<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-value-card-overlay" [style]="overlayStyle"></div>
   <div class="tb-value-card-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
   <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
-    <ng-container [ngSwitch]="layout">
-    <ng-template [ngSwitchCase]="valueCardLayout.square">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.vertical">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.centered">
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-      <div class="tb-value-card-icon-row">
+    <ng-container class="aboba" [ngSwitch]="layout">
+      <ng-template class="aboba" [ngSwitchCase]="valueCardLayout.square">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.vertical">
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
         <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.centered">
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+        <div class="tb-value-card-icon-row">
+          <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
+          <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+        </div>
+        <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="valueCardLayout.simplified">
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      </div>
-      <ng-container *ngTemplateOutlet="dateTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="valueCardLayout.simplified">
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-      <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
-    </ng-template>
-    <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
-                                 layout === valueCardLayout.horizontal_reversed ? layout : ''">
-      <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-      <div fxFlex></div>
-      <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
-    </ng-template>
-  </ng-container>
+        <ng-container *ngTemplateOutlet="labelTpl"></ng-container>
+      </ng-template>
+      <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
+                                   layout === valueCardLayout.horizontal_reversed ? layout : ''">
+        <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
+        <div fxFlex></div>
+        <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
+      </ng-template>
+    </ng-container>
   </div>
 </div>
 <ng-template #iconWithLabelTpl>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
index ed361c1e76..440c2d4056 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
@@ -37,7 +37,7 @@ import {
   getLabel,
   getSingleTsValue,
   iconStyle,
-  overlayStyle,
+  overlayStyle, resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models';
@@ -96,6 +96,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   private panelResize$: ResizeObserver;
 
@@ -139,6 +140,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
     this.labelStyle = textStyle(this.settings.labelFont);
     this.labelColor =  ColorProcessor.fromSettings(this.settings.labelColor);
     this.valueStyle = textStyle(this.settings.valueFont);
+    console.log(this.valueStyle);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.showDate = this.settings.showDate;
@@ -148,6 +150,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
   public ngAfterViewInit() {
@@ -199,8 +202,16 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   private onResize() {
-    const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - squareLayoutPadding;
-    const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (this.horizontal ? 0 : squareLayoutPadding);
+    const paddingLeft = getComputedStyle(this.valueCardPanel.nativeElement).paddingLeft;
+    const paddingRight = getComputedStyle(this.valueCardPanel.nativeElement).paddingRight;
+    const paddingTop = getComputedStyle(this.valueCardPanel.nativeElement).paddingTop;
+    const paddingBottom = getComputedStyle(this.valueCardPanel.nativeElement).paddingBottom;
+    const pLeft = resolveCssSize(paddingLeft)[0];
+    const pRight = resolveCssSize(paddingRight)[0];
+    const pTop = resolveCssSize(paddingTop)[0];
+    const pBottom = resolveCssSize(paddingBottom)[0];
+    const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight);
+    const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom);
     let scale: number;
     if (!this.horizontal) {
       const size = Math.min(panelWidth, panelHeight);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
index df5fc78e9a..7b46ccba4d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.models.ts
@@ -80,6 +80,7 @@ export interface ValueCardWidgetSettings {
   dateFont: Font;
   dateColor: ColorSettings;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSettings => ({
@@ -128,5 +129,6 @@ export const valueCardDefaultSettings = (horizontal: boolean): ValueCardWidgetSe
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 });
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
index 391ade6228..4a4ff409fd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #statusWidgetPanel class="tb-status-widget-panel" [style]="backgroundStyle$ | async">
+<div #statusWidgetPanel class="tb-status-widget-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-status-widget-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
   <div class="tb-status-widget-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
index 8dcefddd2a..a2e32fcfcc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
@@ -38,7 +38,6 @@
   .tb-status-widget-content {
     width: 100%;
     height: 100%;
-    padding: 16px;
     position: relative;
     display: flex;
     flex-direction: column;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
index 5b59b0210f..3f85917897 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
@@ -35,7 +35,7 @@ import {
   backgroundStyle,
   ComponentStyle,
   iconStyle,
-  overlayStyle,
+  overlayStyle, resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -65,6 +65,7 @@ export class StatusWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   overlayInset = '12px';
   borderRadius = '';
@@ -191,8 +192,16 @@ export class StatusWidgetComponent extends
   }
 
   private onResize() {
-    const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width;
-    const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height;
+    const paddingLeft = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingLeft;
+    const paddingRight = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingRight;
+    const paddingTop = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingTop;
+    const paddingBottom = getComputedStyle(this.statusWidgetPanel.nativeElement).paddingBottom;
+    const pLeft = resolveCssSize(paddingLeft)[0];
+    const pRight = resolveCssSize(paddingRight)[0];
+    const pTop = resolveCssSize(paddingTop)[0];
+    const pBottom = resolveCssSize(paddingBottom)[0];
+    const panelWidth = this.statusWidgetPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight);
+    const panelHeight = this.statusWidgetPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom);
     const targetSize = Math.min(panelWidth, panelHeight);
     const scale = targetSize / initialStatusWidgetSize;
     const width = initialStatusWidgetSize;
@@ -220,6 +229,7 @@ export class StatusWidgetComponent extends
     this.showLabel = stateSettings.showLabel && this.layout !== StatusWidgetLayout.icon;
     this.showStatus = stateSettings.showStatus && this.layout !== StatusWidgetLayout.icon;
     this.icon = stateSettings.icon;
+    this.padding = stateSettings.background.overlay.enabled ? undefined : this.settings.padding;
 
     const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
     const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
index 2ef999c6f2..8da94a3739 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
@@ -65,6 +65,7 @@ export interface StatusWidgetSettings {
   layout: StatusWidgetLayout;
   onState: StatusWidgetStateSettings;
   offState: StatusWidgetStateSettings;
+  padding: string
 }
 
 export const statusWidgetDefaultSettings: StatusWidgetSettings = {
@@ -200,5 +201,6 @@ export const statusWidgetDefaultSettings: StatusWidgetSettings = {
         blur: 3
       }
     }
-  }
+  },
+  padding: '12px'
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
index fd9aaca4a6..a8dde3ed4c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style]="backgroundStyle$ | async">
+<div #singleSwitchPanel class="tb-single-switch-panel" [class.auto-scale]="autoScale" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-single-switch-overlay" [style]="overlayStyle" [style.inset]="overlayInset"></div>
   <div class="tb-single-switch-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
index 2c15634893..5bfede43f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.component.ts
@@ -35,7 +35,7 @@ import {
   backgroundStyle,
   ComponentStyle,
   iconStyle,
-  overlayStyle,
+  overlayStyle, resolveCssSize,
   textStyle
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
@@ -74,6 +74,7 @@ export class SingleSwitchWidgetComponent extends
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
   overlayInset = '12px';
 
   value = false;
@@ -123,6 +124,7 @@ export class SingleSwitchWidgetComponent extends
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.layout = this.settings.layout;
 
@@ -234,8 +236,16 @@ export class SingleSwitchWidgetComponent extends
     const height = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height;
     const switchScale = height / initialSwitchHeight;
     const paddingScale = Math.min(switchScale, 1);
-    const panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (horizontalLayoutPadding * paddingScale);
-    const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (verticalLayoutPadding * paddingScale);
+    const paddingLeft = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingLeft;
+    const paddingRight = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingRight;
+    const paddingTop = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingTop;
+    const paddingBottom = getComputedStyle(this.singleSwitchPanel.nativeElement).paddingBottom;
+    const pLeft = resolveCssSize(paddingLeft)[0];
+    const pRight = resolveCssSize(paddingRight)[0];
+    const pTop = resolveCssSize(paddingTop)[0];
+    const pBottom = resolveCssSize(paddingBottom)[0];
+    const panelWidth = this.singleSwitchPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight);
+    const panelHeight = this.singleSwitchPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'transform', `scale(1)`);
     this.renderer.setStyle(this.singleSwitchContent.nativeElement, 'width', 'auto');
     let contentWidth = this.singleSwitchToggleRow.nativeElement.getBoundingClientRect().width;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
index 94586c31de..2fe9ab0d96 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/single-switch-widget.models.ts
@@ -80,6 +80,7 @@ export interface SingleSwitchWidgetSettings {
   offLabelFont: Font;
   offLabelColor: string;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
@@ -217,5 +218,6 @@ export const singleSwitchDefaultSettings: SingleSwitchWidgetSettings = {
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index 76f46862a6..5077c93d8e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -93,5 +93,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
index 9693ca22d4..be7794802c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
@@ -110,7 +110,8 @@ export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
       dateFont: [settings.dateFont, []],
       dateColor: [settings.dateColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index 9208efd68a..e08b40882b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -123,6 +123,12 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
index a1a3e951f2..a4a76e5294 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.ts
@@ -102,7 +102,8 @@ export class SingleSwitchWidgetSettingsComponent extends WidgetSettingsComponent
       offLabelFont: [settings.offLabelFont, []],
       offLabelColor: [settings.offLabelColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 180340881d..c6f65cb5e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -78,5 +78,11 @@
         [layout]="statusWidgetSettingsForm.get('layout').value"
         formControlName="offState">
     </tb-status-widget-state-settings>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
index 03da985a0e..1130b58b21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts
@@ -73,7 +73,8 @@ export class StatusWidgetSettingsComponent extends WidgetSettingsComponent {
       disabledState: [settings.disabledState, []],
       layout: [settings.layout, []],
       onState: [settings.onState, []],
-      offState: [settings.offState, []]
+      offState: [settings.offState, []],
+      padding: [settings.padding, []]
     });
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index 9265164c52..5271825ccf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -100,5 +100,11 @@
       <tb-background-settings formControlName="background">
       </tb-background-settings>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
index e6b8880758..2d16a030b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
@@ -91,7 +91,8 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
 
       arrowColor: [settings.arrowColor, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
index 80ca1960f9..0ec08c2a05 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-wind-speed-direction-panel" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
+<div class="tb-wind-speed-direction-panel" [style.padding]="padding" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
   <div class="tb-wind-speed-direction-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-wind-speed-direction-content">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
index 4ce5cf21d7..0381e8531f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
@@ -92,6 +92,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   shapeResize$: ResizeObserver;
 
@@ -142,6 +143,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
index 7801f80a17..5c1a5518e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.models.ts
@@ -59,6 +59,7 @@ export interface WindSpeedDirectionWidgetSettings {
   minorTicksColor: string;
   minorTicksFont: Font;
   background: BackgroundSettings;
+  padding: string
 }
 
 export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings = {
@@ -101,5 +102,6 @@ export const windSpeedDirectionDefaultSettings: WindSpeedDirectionWidgetSettings
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 };

From 08620e80e4c5c9e207ba6fc036e8b019a200662e Mon Sep 17 00:00:00 2001
From: d2eight <dzolotarenko@thingsboard.io>
Date: Tue, 30 Jul 2024 11:50:53 +0300
Subject: [PATCH 2/4] Some fixes

---
 .../basic/indicator/status-widget-basic-config.component.ts   | 3 +--
 .../widget/lib/cards/value-card-widget.component.html         | 4 ++--
 .../components/widget/lib/indicator/status-widget.models.ts   | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
index c54df3321c..0e012cefe7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.ts
@@ -29,7 +29,7 @@ import {
   statusWidgetLayoutImages,
   statusWidgetLayouts,
   statusWidgetLayoutTranslations,
-  StatusWidgetSettings, StatusWidgetStateSettings
+  StatusWidgetSettings
 } from '@home/components/widget/lib/indicator/status-widget.models';
 
 @Component({
@@ -66,7 +66,6 @@ export class StatusWidgetBasicConfigComponent extends BasicWidgetConfigComponent
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
     const settings: StatusWidgetSettings = {...statusWidgetDefaultSettings, ...(configData.config.settings || {})};
-
     this.statusWidgetConfigForm = this.fb.group({
       targetDevice: [configData.config.targetDevice, []],
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 3d8ebd76b8..814f9f08d8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -21,8 +21,8 @@
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   </div>
   <div #valueCardContent class="tb-value-card-content" [class]="this.layout">
-    <ng-container class="aboba" [ngSwitch]="layout">
-      <ng-template class="aboba" [ngSwitchCase]="valueCardLayout.square">
+    <ng-container [ngSwitch]="layout">
+      <ng-template [ngSwitchCase]="valueCardLayout.square">
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
       </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
index 8da94a3739..d9daebba31 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.models.ts
@@ -202,5 +202,5 @@ export const statusWidgetDefaultSettings: StatusWidgetSettings = {
       }
     }
   },
-  padding: '12px'
+  padding: '16px'
 };

From db321d92da64e6b978b525e4bf1acea0abd49ec5 Mon Sep 17 00:00:00 2001
From: d2eight <dzolotarenko@thingsboard.io>
Date: Tue, 30 Jul 2024 12:01:02 +0300
Subject: [PATCH 3/4] delete console.log

---
 .../components/widget/lib/cards/value-card-widget.component.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
index 440c2d4056..d28f62ee57 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
@@ -140,7 +140,6 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
     this.labelStyle = textStyle(this.settings.labelFont);
     this.labelColor =  ColorProcessor.fromSettings(this.settings.labelColor);
     this.valueStyle = textStyle(this.settings.valueFont);
-    console.log(this.valueStyle);
     this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
 
     this.showDate = this.settings.showDate;

From 1ebb241520d38eb0834352a391d2bcfc6694c601 Mon Sep 17 00:00:00 2001
From: d2eight <dzolotarenko@thingsboard.io>
Date: Tue, 30 Jul 2024 12:49:51 +0300
Subject: [PATCH 4/4] status widget fix

---
 .../widget/lib/indicator/status-widget.component.scss           | 2 +-
 .../components/widget/lib/indicator/status-widget.component.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
index a2e32fcfcc..9585cdb0eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.scss
@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 16px;
   > div:not(.tb-status-widget-overlay), > tb-icon {
     z-index: 1;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
index 3f85917897..77de5bc39c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts
@@ -229,7 +229,7 @@ export class StatusWidgetComponent extends
     this.showLabel = stateSettings.showLabel && this.layout !== StatusWidgetLayout.icon;
     this.showStatus = stateSettings.showStatus && this.layout !== StatusWidgetLayout.icon;
     this.icon = stateSettings.icon;
-    this.padding = stateSettings.background.overlay.enabled ? undefined : this.settings.padding;
+    this.padding = stateSettings.backgroundDisabled.overlay.enabled || stateSettings.background.overlay.enabled  ? undefined : this.settings.padding;
 
     const primaryColor = disabled ? stateSettings.primaryColorDisabled : stateSettings.primaryColor;
     const secondaryColor = disabled ? stateSettings.secondaryColorDisabled : stateSettings.secondaryColor;