Improve state and name display on state-card-display (#18207)

home-assistant · Oct 13, 2023 · 15c67fe · 15c67fe
1 parent a10ec1f
commit 15c67fe
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
@@ -99,6 +99,10 @@ class StateInfo extends LitElement {
         align-items: center;
       }
 
+      state-badge {
+        flex: none;
+      }
+
       .info {
         margin-left: 8px;
         display: flex;

diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
@@ -70,19 +70,21 @@ export class StateCardDisplay extends LitElement {
       haStyle,
       css`
         state-info {
-          flex: 0 0 fit-content;
-          min-width: 0;
+          flex: 0 1 fit-content;
+          min-width: 120px;
         }
         .state {
           color: var(--primary-text-color);
           margin-inline-start: 16px;
           margin-inline-end: initial;
           text-align: var(--float-end, right);
+          min-width: 50px;
           flex: 0 1 fit-content;
           word-break: break-word;
           display: flex;
           align-items: center;
           direction: ltr;
+          justify-content: flex-end;
         }
         .state.has-unit_of_measurement {
           white-space: nowrap;