From da4395b8b3698cd1dc1f145ccdbb0f75010aa080 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Wed, 11 Feb 2026 14:37:41 +0300
Subject: [PATCH] Entity card: allow a reversed order for "value" & "unit"
 (#29407)

* allow a reversed order

* formatEntityStateToParts() does not return "order"

* resolving conflicts

* fixed styles
---
 src/panels/lovelace/cards/hui-entity-card.ts | 38 ++++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index d08458068e..88cd9f4450 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -142,6 +142,10 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
       }
     }
 
+    const indexUnit = stateParts.findIndex((part) => part.type === "unit");
+    const indexValue = stateParts.findIndex((part) => part.type === "value");
+    const reversedOrder = indexUnit !== -1 && indexUnit < indexValue;
+
     const name = computeLovelaceEntityName(
       this.hass,
       stateObj,
@@ -190,7 +194,11 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
           </div>
         </div>
         <div class="info">
-          <span class="value"
+          <span
+            class=${classMap({
+              value: true,
+              "first-part": !reversedOrder,
+            })}
             >${"attribute" in this._config
               ? stateObj.attributes[this._config.attribute!] !== undefined
                 ? html`<ha-attribute-value
@@ -202,8 +210,15 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
                   </ha-attribute-value>`
                 : this.hass.localize("state.default.unknown")
               : stateParts.find((part) => part.type === "value")?.value}</span
-          >
-          ${unit ? html`<span class="measurement">${unit}</span>` : nothing}
+          >${unit
+            ? html`<span
+                class=${classMap({
+                  measurement: true,
+                  "first-part": reversedOrder,
+                })}
+                >${unit}</span
+              >`
+            : nothing}
         </div>
         <div
           class="footer"
@@ -322,19 +337,21 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         }
 
         .info {
+          display: flex;
+          align-items: baseline;
           padding: 0px 16px 16px;
           margin-top: -4px;
+          line-height: var(--ha-line-height-condensed);
+        }
+
+        .info > * {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
-          line-height: var(--ha-line-height-condensed);
         }
 
         .value {
           font-size: var(--ha-font-size-3xl);
-          margin-right: 4px;
-          margin-inline-end: 4px;
-          margin-inline-start: initial;
         }
 
         .measurement {
@@ -342,6 +359,13 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
           color: var(--secondary-text-color);
         }
 
+        .first-part {
+          order: -1; /* ? */
+          margin-right: 4px;
+          margin-inline-end: 4px;
+          margin-inline-start: initial;
+        }
+
         .with-fixed-footer {
           justify-content: flex-start;
         }