Process feedback

src/data/lovelace/config/view.ts

@@ -37,9 +37,11 @@ export interface LovelaceViewHeaderConfig {
   badges_wrap?: "wrap" | "scroll";
 }
 
+export const DEFAULT_FOOTER_MAX_WIDTH_PX = 600;
+
 export interface LovelaceViewFooterConfig {
   card?: LovelaceCardConfig;
-  column_span?: number;
+  max_width?: number;
 }
 
 export interface LovelaceViewSidebarConfig {

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -22,7 +22,6 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       dense_section_placement: true,
       max_columns: 3,
       footer: {
-        column_span: 1.1,
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,

src/panels/energy/strategies/energy-view-strategy.ts

@@ -23,7 +23,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       max_columns: 3,
       sections: [],
       footer: {
-        column_span: 1.1,
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,

src/panels/energy/strategies/gas-view-strategy.ts

@@ -21,7 +21,6 @@ export class GasViewStrategy extends ReactiveElement {
       max_columns: 3,
       sections: [{ type: "grid", cards: [], column_span: 3 }],
       footer: {
-        column_span: 1.1,
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,

src/panels/energy/strategies/water-view-strategy.ts

@@ -22,7 +22,6 @@ export class WaterViewStrategy extends ReactiveElement {
       max_columns: 3,
       sections: [{ type: "grid", cards: [], column_span: 3 }],
       footer: {
-        column_span: 1.1,
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,

src/panels/lovelace/editor/view-footer/hui-dialog-edit-view-footer.ts

@@ -91,7 +91,6 @@ export class HuiDialogEditViewFooter extends LitElement {
         <hui-view-footer-settings-editor
           .hass=${this.hass}
           .config=${this._config}
-          .maxColumns=${this._params.maxColumns}
           @config-changed=${this._configChanged}
         ></hui-view-footer-settings-editor>
       `;
@@ -106,7 +105,7 @@ export class HuiDialogEditViewFooter extends LitElement {
         .hass=${this.hass}
         .open=${this._open}
         header-title=${title}
-        .width=${this._yamlMode ? "full" : "large"}
+        width="medium"
         @closed=${this._dialogClosed}
         class=${this._yamlMode ? "yaml-mode" : ""}
       >

src/panels/lovelace/editor/view-footer/hui-view-footer-settings-editor.ts

@@ -1,53 +1,48 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
-import type { LovelaceViewFooterConfig } from "../../../../data/lovelace/config/view";
+import {
+  DEFAULT_FOOTER_MAX_WIDTH_PX,
+  type LovelaceViewFooterConfig,
+} from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 
+const SCHEMA = [
+  {
+    name: "max_width",
+    selector: {
+      number: {
+        min: 100,
+        max: 1600,
+        step: 10,
+        unit_of_measurement: "px",
+      },
+    },
+  },
+] as const satisfies HaFormSchema[];
+
 @customElement("hui-view-footer-settings-editor")
 export class HuiViewFooterSettingsEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public config?: LovelaceViewFooterConfig;
 
-  @property({ attribute: false }) public maxColumns = 4;
-
-  private _schema = memoizeOne(
-    (maxColumns: number) =>
-      [
-        {
-          name: "column_span",
-          selector: {
-            number: {
-              min: 1,
-              max: maxColumns,
-              slider_ticks: true,
-            },
-          },
-        },
-      ] as const satisfies HaFormSchema[]
-  );
-
   protected render() {
     const data = {
-      column_span: this.config?.column_span || 1,
+      max_width: this.config?.max_width || DEFAULT_FOOTER_MAX_WIDTH_PX,
     };
 
-    const schema = this._schema(this.maxColumns);
-
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabel}
-        .computeHelper=${this._computeHelper}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
@@ -65,19 +60,10 @@ export class HuiViewFooterSettingsEditor extends LitElement {
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabel = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) =>
+  private _computeLabel = (schema: SchemaUnion<typeof SCHEMA>) =>
     this.hass.localize(
       `ui.panel.lovelace.editor.edit_view_footer.settings.${schema.name}`
     );
-
-  private _computeHelper = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) =>
-    this.hass.localize(
-      `ui.panel.lovelace.editor.edit_view_footer.settings.${schema.name}_helper`
-    ) || "";
 }
 
 declare global {

src/panels/lovelace/editor/view-footer/show-edit-view-footer-dialog.ts

@@ -4,7 +4,6 @@ import type { LovelaceViewFooterConfig } from "../../../../data/lovelace/config/
 export interface EditViewFooterDialogParams {
   saveConfig: (config: LovelaceViewFooterConfig) => void;
   config: LovelaceViewFooterConfig;
-  maxColumns: number;
 }
 
 export const showEditViewFooterDialog = (

src/panels/lovelace/views/hui-view-footer.ts

@@ -7,9 +7,10 @@ import { styleMap } from "lit/directives/style-map";
 import "../../../components/ha-ripple";
 import "../../../components/ha-svg-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
-import type {
-  LovelaceViewConfig,
-  LovelaceViewFooterConfig,
+import {
+  DEFAULT_FOOTER_MAX_WIDTH_PX,
+  type LovelaceViewConfig,
+  type LovelaceViewFooterConfig,
 } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
 import type { HuiCard } from "../cards/hui-card";
@@ -19,7 +20,6 @@ import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog"
 import { replaceView } from "../editor/config-util";
 import { showEditViewFooterDialog } from "../editor/view-footer/show-edit-view-footer-dialog";
 import type { Lovelace } from "../types";
-import { DEFAULT_MAX_COLUMNS } from "./hui-sections-view";
 
 @customElement("hui-view-footer")
 export class HuiViewFooter extends LitElement {
@@ -97,13 +97,8 @@ export class HuiViewFooter extends LitElement {
   }
 
   private _configure() {
-    const viewConfig = this.lovelace.config.views[
-      this.viewIndex
-    ] as LovelaceViewConfig;
-
     showEditViewFooterDialog(this, {
       config: this.config || {},
-      maxColumns: viewConfig.max_columns || DEFAULT_MAX_COLUMNS,
       saveConfig: (newConfig: LovelaceViewFooterConfig) => {
         this._saveFooterConfig(newConfig);
       },
@@ -180,13 +175,11 @@ export class HuiViewFooter extends LitElement {
 
     if (!card && !editMode) return nothing;
 
-    const columnSpan = this.config?.column_span || 1;
-
     return html`
       <div
         class=${classMap({ wrapper: true, "edit-mode": editMode })}
         style=${styleMap({
-          "--footer-column-span": String(columnSpan),
+          "--footer-max-width": `${this.config?.max_width || DEFAULT_FOOTER_MAX_WIDTH_PX}px`,
         })}
       >
         ${editMode
@@ -228,23 +221,18 @@ export class HuiViewFooter extends LitElement {
 
     :host([sticky]) {
       position: sticky;
-      bottom: 0;
+      bottom: var(--row-gap);
       z-index: 4;
     }
 
     .wrapper {
-      padding: var(--ha-space-4) 0;
-      padding-bottom: max(
-        var(--ha-space-4),
-        var(--safe-area-inset-bottom, 0px)
+      padding: var(--ha-space-2) 0;
+      padding-bottom: calc(
+        max(var(--ha-space-2), var(--safe-area-inset-bottom, 0px))
       );
       box-sizing: content-box;
       margin: 0 auto;
-      max-width: calc(
-        var(--footer-column-span, 1) / var(--column-count, 1) * 100% +
-          (var(--footer-column-span, 1) - var(--column-count, 1)) /
-          var(--column-count, 1) * var(--column-gap, 32px)
-      );
+      max-width: var(--footer-max-width, 600px);
     }
 
     .wrapper:not(.edit-mode) {
@@ -315,7 +303,7 @@ export class HuiViewFooter extends LitElement {
       border-bottom-left-radius: 0px;
       border-bottom-right-radius: 0px;
       background: var(--secondary-background-color);
-      --mdc-icon-button-size: 36px;
+      --ha-icon-button-size: 36px;
       --mdc-icon-size: 20px;
       color: var(--primary-text-color);
     }

src/translations/en.json

@@ -8494,8 +8494,7 @@
             "edit_yaml": "[%key:ui::panel::lovelace::editor::edit_view::edit_yaml%]",
             "saving_failed": "[%key:ui::panel::lovelace::editor::edit_view::saving_failed%]",
             "settings": {
-              "column_span": "Width",
-              "column_span_helper": "[%key:ui::panel::lovelace::editor::edit_section::settings::column_span_helper%]"
+              "max_width": "Max width"
             }
           },
           "edit_badges": {