From 9c863d216adf7f5c49629bbacb2a751da29a6ca0 Mon Sep 17 00:00:00 2001
From: JonahKr <jonah.kraushaar@gmx.net>
Date: Tue, 22 Nov 2022 16:56:09 +0100
Subject: [PATCH] Fixing Checkbox Labels #116

---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 src/editor.ts     | 10 +++++-----
 src/styles.ts     |  1 +
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f478e4b..40f4ffd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "power-distribution-card",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "power-distribution-card",
-      "version": "2.5.5",
+      "version": "2.5.6",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.0.96",
diff --git a/package.json b/package.json
index b0cda34..9c38bd5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "power-distribution-card",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "license": "MIT",
   "author": "JonahKr",
   "description": "A Lovelace Card for visualizing power distributions.",
diff --git a/src/editor.ts b/src/editor.ts
index efa168c..d63d722 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -44,11 +44,11 @@ export class PowerDistributionCardEditor extends LitElement implements LovelaceC
    */
   protected async firstUpdated(): Promise<void> {
     if (!customElements.get('ha-form') || !customElements.get('hui-action-editor')) {
-      (customElements.get('hui-button-card') as any)?.getConfigElement();
+      (customElements.get('hui-button-card') as HassCustomElement)?.getConfigElement();
     }
 
     if (!customElements.get('ha-entity-picker')) {
-      (customElements.get('hui-entities-card') as any)?.getConfigElement();
+      (customElements.get('hui-entities-card') as HassCustomElement)?.getConfigElement();
     }
   }
 
@@ -256,7 +256,7 @@ export class PowerDistributionCardEditor extends LitElement implements LovelaceC
             .configValue=${'hide_arrows'}
             @change=${this._itemEntityChanged}
           />
-          <label for="invert-value"> ${localize('editor.settings.hide-arrows')}</label>
+          <label for="hide-arrows"> ${localize('editor.settings.hide-arrows')}</label>
         </div>
       </div>
       <div class="side-by-side">
@@ -383,12 +383,12 @@ export class PowerDistributionCardEditor extends LitElement implements LovelaceC
       <div class="checkbox">
         <input
           type="checkbox"
-          id="hide-arrows"
+          id="secondary_info_replace_name"
           .checked="${item.secondary_info_replace_name || false}"
           .configValue=${'secondary_info_replace_name'}
           @change=${this._itemEntityChanged}
         />
-        <label for="invert-value"> ${localize('editor.settings.replace_name')}</label>
+        <label for="secondary_info_replace_name"> ${localize('editor.settings.replace_name')}</label>
       </div>
       <br />
       <h3>${localize('editor.settings.color-settings', true)}</h3>
diff --git a/src/styles.ts b/src/styles.ts
index e94cb6a..3252393 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -135,6 +135,7 @@ export const styles = css`
 
   value {
     float: right;
+    width: 54px;
   }
 
   value > p {