From 19d014307adb6d2402c1a687238af29f403ce5ae Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Wed, 25 May 2022 18:40:04 +0200
Subject: [PATCH] Ensure state is vertically centered in more-info (#12780)

---
 .../lovelace/components/hui-generic-entity-row.ts      | 10 ++++++++--
 src/state-summary/state-card-display.ts                |  2 ++
 src/state-summary/state-card-input_number.js           |  5 +++--
 src/state-summary/state-card-number.js                 |  5 +++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index b87c39f5a7..9d2b973c25 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -155,7 +155,7 @@ class HuiGenericEntityRow extends LitElement {
           </div>`
         : html``}
       ${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
-        ? html` <div
+        ? html`<div
             class="text-content ${classMap({
               pointer,
             })}"
@@ -165,7 +165,7 @@ class HuiGenericEntityRow extends LitElement {
               hasDoubleClick: hasAction(this.config!.double_tap_action),
             })}
           >
-            <slot></slot>
+            <div class="state"><slot></slot></div>
           </div>`
         : html`<slot></slot>`}
     `;
@@ -230,6 +230,12 @@ class HuiGenericEntityRow extends LitElement {
       .pointer {
         cursor: pointer;
       }
+      .state {
+        text-align: right;
+      }
+      .state.rtl {
+        text-align: left;
+      }
     `;
   }
 }
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index 1e8a856975..48800fb2dd 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -90,6 +90,8 @@ export class StateCardDisplay extends LitElement {
           text-align: right;
           flex: 0 0 auto;
           overflow-wrap: break-word;
+          display: flex;
+          align-items: center;
         }
         :host([rtl]) .state {
           margin-right: 16px;
diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js
index 85cda4ffc1..2e0cd3f8b7 100644
--- a/src/state-summary/state-card-input_number.js
+++ b/src/state-summary/state-card-input_number.js
@@ -24,8 +24,9 @@ class StateCardInputNumber extends mixinBehaviors(
           @apply --paper-font-body1;
           color: var(--primary-text-color);
 
-          text-align: right;
-          line-height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: end;
         }
         .sliderstate {
           min-width: 45px;
diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js
index fd9e9dda2e..3a701d8eae 100644
--- a/src/state-summary/state-card-number.js
+++ b/src/state-summary/state-card-number.js
@@ -23,8 +23,9 @@ class StateCardNumber extends mixinBehaviors(
           @apply --paper-font-body1;
           color: var(--primary-text-color);
 
-          text-align: right;
-          line-height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: end;
         }
         .sliderstate {
           min-width: 45px;