From 19d014307adb6d2402c1a687238af29f403ce5ae Mon Sep 17 00:00:00 2001 From: Philip Allgaier 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 { ` : html``} ${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain) - ? html`
- +
` : html``} `; @@ -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;