From bfeee618f49ab7a86205474eabd22617de297cf1 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Mon, 9 Oct 2023 14:52:03 +0300
Subject: [PATCH] more-info: make long states "multilined" (#17649)

* align info when a state is multiline

* Enable multiline for long states

* Update state-info.ts

* Update state-card-display.ts
---
 src/components/entity/state-info.ts     | 14 +++++---------
 src/state-summary/state-card-display.ts |  6 +++---
 2 files changed, 8 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 7ddc3074db..9d0f570158 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -70,7 +70,7 @@ export class StateCardDisplay extends LitElement {
       haStyle,
       css`
         state-info {
-          flex: 1 1 auto;
+          flex: 0 0 fit-content;
           min-width: 0;
         }
         .state {
@@ -78,8 +78,8 @@ 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 1 fit-content;
+          word-break: break-word;
           display: flex;
           align-items: center;
           direction: ltr;