Tweak how scenes behave in generated lovelace (#10730)

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -87,7 +87,8 @@ const splitByAreas = (
 
 export const computeCards = (
   states: Array<[string, HassEntity?]>,
-  entityCardOptions: Partial<EntitiesCardConfig>
+  entityCardOptions: Partial<EntitiesCardConfig>,
+  renderFooterEntities = true
 ): LovelaceCardConfig[] => {
   const cards: LovelaceCardConfig[] = [];
 
@@ -146,12 +147,28 @@ export const computeCards = (
         show_forecast: false,
       };
       cards.push(cardConfig);
-    } else if (domain === "scene" || domain === "script") {
-      footerEntities.push({
+    } else if (
+      renderFooterEntities &&
+      (domain === "scene" || domain === "script")
+    ) {
+      const conf: typeof footerEntities[0] = {
         entity: entityId,
         show_icon: true,
         show_name: true,
-      });
+      };
+      let name: string | undefined;
+      if (
+        titlePrefix &&
+        stateObj &&
+        // eslint-disable-next-line no-cond-assign
+        (name = stripPrefixFromEntityName(
+          computeStateName(stateObj),
+          titlePrefix
+        ))
+      ) {
+        conf.name = name;
+      }
+      footerEntities.push(conf);
     } else if (
       domain === "sensor" &&
       stateObj?.attributes.device_class === SENSOR_DEVICE_CLASS_BATTERY
@@ -177,6 +194,12 @@ export const computeCards = (
     }
   }
 
+  // If we ended up with footer entities but no normal entities,
+  // render the footer entities as normal entities.
+  if (entities.length === 0 && footerEntities.length > 0) {
+    return computeCards(states, entityCardOptions, false);
+  }
+
   if (entities.length > 0 || footerEntities.length > 0) {
     const card: EntitiesCardConfig = {
       type: "entities",

src/panels/lovelace/components/hui-buttons-base.ts

@@ -65,6 +65,8 @@ export class HuiButtonsBase extends LitElement {
       :host {
         display: flex;
         justify-content: space-evenly;
+        flex-wrap: wrap;
+        padding: 0 8px;
       }
       div {
         cursor: pointer;

src/panels/lovelace/header-footer/hui-buttons-header-footer.ts

@@ -1,5 +1,6 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { computeDomain } from "../../../common/entity/compute_domain";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "../common/process-config-entities";
 import "../components/hui-buttons-base";
@@ -26,11 +27,21 @@ export class HuiButtonsHeaderFooter
 
   public setConfig(config: ButtonsHeaderFooterConfig): void {
     this._configEntities = processConfigEntities(config.entities).map(
-      (entityConfig) => ({
-        tap_action: { action: "toggle" },
-        hold_action: { action: "more-info" },
-        ...entityConfig,
-      })
+      (entityConfig) => {
+        const conf = {
+          tap_action: { action: "toggle" },
+          hold_action: { action: "more-info" },
+          ...entityConfig,
+        };
+        if (computeDomain(entityConfig.entity) === "scene") {
+          conf.tap_action = {
+            action: "call-service",
+            service: "scene.turn_on",
+            target: { entity_id: conf.entity },
+          };
+        }
+        return conf;
+      }
     );
   }