From 0768bc3e2721ab96fe35a8783999123928312f1a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 21 Aug 2023 14:57:10 +0200
Subject: [PATCH] Alt: more-info: make long states "multilined"

---
 src/components/entity/state-info.ts     | 14 +++++---------
 src/state-summary/state-card-display.ts |  7 ++++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index 4b2e0b2cd5..980b6cb913 100644
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -95,25 +95,21 @@ class StateInfo extends LitElement {
       :host {
         min-width: 120px;
         white-space: nowrap;
-      }
-
-      state-badge {
-        float: left;
-      }
-      :host([rtl]) state-badge {
-        float: right;
+        display: flex;
+        align-items: center;
       }
 
       .info {
-        margin-left: 56px;
+        margin-left: 8px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         height: 100%;
+        min-width: 0;
       }
 
       :host([rtl]) .info {
-        margin-right: 56px;
+        margin-right: 8px;
         margin-left: 0;
         text-align: right;
       }
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index a168d05711..97c5bb65a5 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -77,7 +77,7 @@ export class StateCardDisplay extends LitElement {
       haStyle,
       css`
         state-info {
-          flex: 1 1 auto;
+          flex: 0 1 fit-content;
           min-width: 0;
         }
         .state {
@@ -85,9 +85,10 @@ export class StateCardDisplay extends LitElement {
           margin-inline-start: 16px;
           margin-inline-end: initial;
           text-align: var(--float-end, right);
-          flex: 0 0 auto;
-          overflow-wrap: break-word;
+          flex: 0 2 fit-content;
+          word-break: break-word;
           display: flex;
+          justify-content: flex-end;
           align-items: center;
           direction: ltr;
         }