diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 6f9f4fe5e8..42d7ff9b8e 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -62,9 +62,11 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
}
}
+ const columnWidth = config.entities.length > 4 ? "20%" : `${100 / config.entities.length}%`
+
this.style.setProperty(
"--glance-column-width",
- config.column_width || "20%"
+ config.column_width || columnWidth
);
if (config.theming) {
@@ -96,10 +98,10 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
${repeat(
- entities,
- (entityConf) => entityConf.entity,
- (entityConf) => this.renderEntity(entityConf)
- )}
+ entities,
+ (entityConf) => entityConf.entity,
+ (entityConf) => this.renderEntity(entityConf)
+ )}
`;
@@ -158,23 +160,23 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
@click="${this.handleClick}"
>
${
- this.config!.show_name !== false
- ? html`
${
- "name" in entityConf
- ? entityConf.name
- : computeStateName(stateObj)
- }
`
- : ""
- }
+ this.config!.show_name !== false
+ ? html`${
+ "name" in entityConf
+ ? entityConf.name
+ : computeStateName(stateObj)
+ }
`
+ : ""
+ }
${
- this.config!.show_state !== false
- ? html`${computeStateDisplay(this.localize, stateObj)}
`
- : ""
- }
+ this.config!.show_state !== false
+ ? html`${computeStateDisplay(this.localize, stateObj)}
`
+ : ""
+ }
`;
}