Make energy config page consistent (#29452)

* Make energy config page consistent

* Update src/translations/en.json

Co-authored-by: Norbert Rittel <norbert@rittel.de>

* small tweaks

---------

Co-authored-by: Norbert Rittel <norbert@rittel.de>
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -57,7 +57,7 @@ export class EnergyBatterySettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.battery.title")}
@@ -83,56 +83,58 @@ export class EnergyBatterySettings extends LitElement {
               ></ha-energy-validation-result>
             `
           )}
-
-          <h3>
-            ${this.hass.localize(
-              "ui.panel.config.energy.battery.battery_systems"
-            )}
-          </h3>
-          ${batterySources.map((source) => {
-            const toEntityState = this.hass.states[source.stat_energy_to];
-            return html`
-              <div class="row" .source=${source}>
-                ${toEntityState?.attributes.icon
-                  ? html`<ha-icon
-                      .icon=${toEntityState.attributes.icon}
-                    ></ha-icon>`
-                  : html`<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>`}
-                <div class="content">
-                  <span class="label"
-                    >${getStatisticLabel(
-                      this.hass,
-                      source.stat_energy_from,
-                      this.statsMetadata?.[source.stat_energy_from]
-                    )}</span
-                  >
-                  <span class="label"
-                    >${getStatisticLabel(
-                      this.hass,
-                      source.stat_energy_to,
-                      this.statsMetadata?.[source.stat_energy_to]
-                    )}</span
-                  >
+          ${batterySources.length > 0
+            ? html`
+                <div class="items-container">
+                  ${batterySources.map((source) => {
+                    const toEntityState =
+                      this.hass.states[source.stat_energy_to];
+                    return html`
+                      <div class="row" .source=${source}>
+                        ${toEntityState?.attributes.icon
+                          ? html`<ha-icon
+                              .icon=${toEntityState.attributes.icon}
+                            ></ha-icon>`
+                          : html`<ha-svg-icon
+                              .path=${mdiBatteryHigh}
+                            ></ha-svg-icon>`}
+                        <div class="content">
+                          <span class="label"
+                            >${getStatisticLabel(
+                              this.hass,
+                              source.stat_energy_from,
+                              this.statsMetadata?.[source.stat_energy_from]
+                            )}</span
+                          >
+                          <span class="label"
+                            >${getStatisticLabel(
+                              this.hass,
+                              source.stat_energy_to,
+                              this.statsMetadata?.[source.stat_energy_to]
+                            )}</span
+                          >
+                        </div>
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.battery.edit_battery_system"
+                          )}
+                          @click=${this._editSource}
+                          .path=${mdiPencil}
+                        ></ha-icon-button>
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.battery.delete_battery_system"
+                          )}
+                          @click=${this._deleteSource}
+                          .path=${mdiDelete}
+                        ></ha-icon-button>
+                      </div>
+                    `;
+                  })}
                 </div>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.battery.edit_battery_system"
-                  )}
-                  @click=${this._editSource}
-                  .path=${mdiPencil}
-                ></ha-icon-button>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.battery.delete_battery_system"
-                  )}
-                  @click=${this._deleteSource}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
-          <div class="row border-bottom">
-            <ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
+              `
+            : ""}
+          <div class="row">
             <ha-button
               @click=${this._addSource}
               appearance="filled"

src/panels/config/energy/components/ha-energy-device-settings-water.ts

@@ -49,7 +49,7 @@ export class EnergyDeviceSettingsWater extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
           ${this.hass.localize(
@@ -82,49 +82,52 @@ export class EnergyDeviceSettingsWater extends LitElement {
               ></ha-energy-validation-result>
             `
           )}
-          <h3>
-            ${this.hass.localize(
-              "ui.panel.config.energy.device_consumption_water.devices"
-            )}
-          </h3>
-          <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
-            <div class="devices">
-              ${repeat(
-                this.preferences.device_consumption_water,
-                (device) => device.stat_consumption,
-                (device) => html`
-                  <div class="row" .device=${device}>
-                    <div class="handle">
-                      <ha-svg-icon
-                        .path=${mdiDragHorizontalVariant}
-                      ></ha-svg-icon>
+          ${this.preferences.device_consumption_water.length > 0
+            ? html`
+                <div class="items-container">
+                  <ha-sortable
+                    handle-selector=".handle"
+                    @item-moved=${this._itemMoved}
+                  >
+                    <div class="devices">
+                      ${repeat(
+                        this.preferences.device_consumption_water,
+                        (device) => device.stat_consumption,
+                        (device) => html`
+                          <div class="row" .device=${device}>
+                            <div class="handle">
+                              <ha-svg-icon
+                                .path=${mdiDragHorizontalVariant}
+                              ></ha-svg-icon>
+                            </div>
+                            <span class="content"
+                              >${device.name ||
+                              getStatisticLabel(
+                                this.hass,
+                                device.stat_consumption,
+                                this.statsMetadata?.[device.stat_consumption]
+                              )}</span
+                            >
+                            <ha-icon-button
+                              .label=${this.hass.localize("ui.common.edit")}
+                              @click=${this._editDevice}
+                              .path=${mdiPencil}
+                            ></ha-icon-button>
+                            <ha-icon-button
+                              .label=${this.hass.localize("ui.common.delete")}
+                              @click=${this._deleteDevice}
+                              .device=${device}
+                              .path=${mdiDelete}
+                            ></ha-icon-button>
+                          </div>
+                        `
+                      )}
                     </div>
-                    <span class="content"
-                      >${device.name ||
-                      getStatisticLabel(
-                        this.hass,
-                        device.stat_consumption,
-                        this.statsMetadata?.[device.stat_consumption]
-                      )}</span
-                    >
-                    <ha-icon-button
-                      .label=${this.hass.localize("ui.common.edit")}
-                      @click=${this._editDevice}
-                      .path=${mdiPencil}
-                    ></ha-icon-button>
-                    <ha-icon-button
-                      .label=${this.hass.localize("ui.common.delete")}
-                      @click=${this._deleteDevice}
-                      .device=${device}
-                      .path=${mdiDelete}
-                    ></ha-icon-button>
-                  </div>
-                `
-              )}
-            </div>
-          </ha-sortable>
+                  </ha-sortable>
+                </div>
+              `
+            : ""}
           <div class="row">
-            <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
             <ha-button
               @click=${this._addDevice}
               appearance="filled"

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -49,7 +49,7 @@ export class EnergyDeviceSettings extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
           ${this.hass.localize(
@@ -82,49 +82,52 @@ export class EnergyDeviceSettings extends LitElement {
               ></ha-energy-validation-result>
             `
           )}
-          <h3>
-            ${this.hass.localize(
-              "ui.panel.config.energy.device_consumption.devices"
-            )}
-          </h3>
-          <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
-            <div class="devices">
-              ${repeat(
-                this.preferences.device_consumption,
-                (device) => device.stat_consumption,
-                (device) => html`
-                  <div class="row" .device=${device}>
-                    <div class="handle">
-                      <ha-svg-icon
-                        .path=${mdiDragHorizontalVariant}
-                      ></ha-svg-icon>
+          ${this.preferences.device_consumption.length > 0
+            ? html`
+                <div class="items-container">
+                  <ha-sortable
+                    handle-selector=".handle"
+                    @item-moved=${this._itemMoved}
+                  >
+                    <div class="devices">
+                      ${repeat(
+                        this.preferences.device_consumption,
+                        (device) => device.stat_consumption,
+                        (device) => html`
+                          <div class="row" .device=${device}>
+                            <div class="handle">
+                              <ha-svg-icon
+                                .path=${mdiDragHorizontalVariant}
+                              ></ha-svg-icon>
+                            </div>
+                            <span class="content"
+                              >${device.name ||
+                              getStatisticLabel(
+                                this.hass,
+                                device.stat_consumption,
+                                this.statsMetadata?.[device.stat_consumption]
+                              )}</span
+                            >
+                            <ha-icon-button
+                              .label=${this.hass.localize("ui.common.edit")}
+                              @click=${this._editDevice}
+                              .path=${mdiPencil}
+                            ></ha-icon-button>
+                            <ha-icon-button
+                              .label=${this.hass.localize("ui.common.delete")}
+                              @click=${this._deleteDevice}
+                              .device=${device}
+                              .path=${mdiDelete}
+                            ></ha-icon-button>
+                          </div>
+                        `
+                      )}
                     </div>
-                    <span class="content"
-                      >${device.name ||
-                      getStatisticLabel(
-                        this.hass,
-                        device.stat_consumption,
-                        this.statsMetadata?.[device.stat_consumption]
-                      )}</span
-                    >
-                    <ha-icon-button
-                      .label=${this.hass.localize("ui.common.edit")}
-                      @click=${this._editDevice}
-                      .path=${mdiPencil}
-                    ></ha-icon-button>
-                    <ha-icon-button
-                      .label=${this.hass.localize("ui.common.delete")}
-                      @click=${this._deleteDevice}
-                      .device=${device}
-                      .path=${mdiDelete}
-                    ></ha-icon-button>
-                  </div>
-                `
-              )}
-            </div>
-          </ha-sortable>
+                  </ha-sortable>
+                </div>
+              `
+            : ""}
           <div class="row">
-            <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
             <ha-button
               @click=${this._addDevice}
               appearance="filled"

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -58,7 +58,7 @@ export class EnergyGasSettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiFire}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.gas.title")}
@@ -82,44 +82,47 @@ export class EnergyGasSettings extends LitElement {
               ></ha-energy-validation-result>
             `
           )}
-          <h3>
-            ${this.hass.localize("ui.panel.config.energy.gas.gas_consumption")}
-          </h3>
-          ${gasSources.map((source) => {
-            const entityState = this.hass.states[source.stat_energy_from];
-            return html`
-              <div class="row" .source=${source}>
-                ${entityState?.attributes.icon
-                  ? html`<ha-icon
-                      .icon=${entityState.attributes.icon}
-                    ></ha-icon>`
-                  : html`<ha-svg-icon .path=${mdiFire}></ha-svg-icon>`}
-                <span class="content"
-                  >${getStatisticLabel(
-                    this.hass,
-                    source.stat_energy_from,
-                    this.statsMetadata?.[source.stat_energy_from]
-                  )}</span
-                >
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.gas.edit_gas_source"
-                  )}
-                  @click=${this._editSource}
-                  .path=${mdiPencil}
-                ></ha-icon-button>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.gas.delete_gas_source"
-                  )}
-                  @click=${this._deleteSource}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
-          <div class="row border-bottom">
-            <ha-svg-icon .path=${mdiFire}></ha-svg-icon>
+          ${gasSources.length > 0
+            ? html`
+                <div class="items-container">
+                  ${gasSources.map((source) => {
+                    const entityState =
+                      this.hass.states[source.stat_energy_from];
+                    return html`
+                      <div class="row" .source=${source}>
+                        ${entityState?.attributes.icon
+                          ? html`<ha-icon
+                              .icon=${entityState.attributes.icon}
+                            ></ha-icon>`
+                          : html`<ha-svg-icon .path=${mdiFire}></ha-svg-icon>`}
+                        <span class="content"
+                          >${getStatisticLabel(
+                            this.hass,
+                            source.stat_energy_from,
+                            this.statsMetadata?.[source.stat_energy_from]
+                          )}</span
+                        >
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.gas.edit_gas_source"
+                          )}
+                          @click=${this._editSource}
+                          .path=${mdiPencil}
+                        ></ha-icon-button>
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.gas.delete_gas_source"
+                          )}
+                          @click=${this._deleteSource}
+                          .path=${mdiDelete}
+                        ></ha-icon-button>
+                      </div>
+                    `;
+                  })}
+                </div>
+              `
+            : ""}
+          <div class="row">
             <ha-button
               @click=${this._addSource}
               appearance="filled"

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -69,7 +69,7 @@ export class EnergyGridSettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.grid.title")}
@@ -104,58 +104,63 @@ export class EnergyGridSettings extends LitElement {
               "ui.panel.config.energy.grid.grid_connections"
             )}
           </h3>
-          ${gridSources.map((source, idx) => {
-            // At least one of import/export/power must exist (enforced by validation)
-            const primaryStat = (source.stat_energy_from ||
-              source.stat_energy_to ||
-              source.stat_rate)!;
-            const primaryEntityState = this.hass.states[primaryStat];
-            return html`
-              <div class="row" .source=${source} .sourceIndex=${idx}>
-                ${primaryEntityState?.attributes.icon
-                  ? html`<ha-icon
-                      .icon=${primaryEntityState.attributes.icon}
-                    ></ha-icon>`
-                  : html`<ha-svg-icon
-                      .path=${mdiTransmissionTower}
-                    ></ha-svg-icon>`}
-                <div class="content">
-                  <span class="label"
-                    >${getStatisticLabel(
-                      this.hass,
-                      primaryStat,
-                      this.statsMetadata?.[primaryStat]
-                    )}</span
-                  >
-                  ${source.stat_energy_from && source.stat_energy_to
-                    ? html`<span class="label secondary"
-                        >${getStatisticLabel(
-                          this.hass,
-                          source.stat_energy_to,
-                          this.statsMetadata?.[source.stat_energy_to]
-                        )}</span
-                      >`
-                    : nothing}
+          ${gridSources.length > 0
+            ? html`
+                <div class="items-container">
+                  ${gridSources.map((source, idx) => {
+                    // At least one of import/export/power must exist (enforced by validation)
+                    const primaryStat = (source.stat_energy_from ||
+                      source.stat_energy_to ||
+                      source.stat_rate)!;
+                    const primaryEntityState = this.hass.states[primaryStat];
+                    return html`
+                      <div class="row" .source=${source} .sourceIndex=${idx}>
+                        ${primaryEntityState?.attributes.icon
+                          ? html`<ha-icon
+                              .icon=${primaryEntityState.attributes.icon}
+                            ></ha-icon>`
+                          : html`<ha-svg-icon
+                              .path=${mdiTransmissionTower}
+                            ></ha-svg-icon>`}
+                        <div class="content">
+                          <span class="label"
+                            >${getStatisticLabel(
+                              this.hass,
+                              primaryStat,
+                              this.statsMetadata?.[primaryStat]
+                            )}</span
+                          >
+                          ${source.stat_energy_from && source.stat_energy_to
+                            ? html`<span class="label secondary"
+                                >${getStatisticLabel(
+                                  this.hass,
+                                  source.stat_energy_to,
+                                  this.statsMetadata?.[source.stat_energy_to]
+                                )}</span
+                              >`
+                            : nothing}
+                        </div>
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.grid.edit_connection"
+                          )}
+                          @click=${this._editSource}
+                          .path=${mdiPencil}
+                        ></ha-icon-button>
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.grid.delete_connection"
+                          )}
+                          @click=${this._deleteSource}
+                          .path=${mdiDelete}
+                        ></ha-icon-button>
+                      </div>
+                    `;
+                  })}
                 </div>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.grid.edit_connection"
-                  )}
-                  @click=${this._editSource}
-                  .path=${mdiPencil}
-                ></ha-icon-button>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.grid.delete_connection"
-                  )}
-                  @click=${this._deleteSource}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
-          <div class="row border-bottom">
-            <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
+              `
+            : nothing}
+          <div class="row">
             <ha-button
               @click=${this._addSource}
               appearance="filled"
@@ -174,43 +179,37 @@ export class EnergyGridSettings extends LitElement {
             )}
           </h3>
           ${this._co2ConfigEntry
-            ? html`<div class="row" .entry=${this._co2ConfigEntry}>
-                <img
-                  alt=""
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${brandsUrl({
-                    domain: "co2signal",
-                    type: "icon",
-                    darkOptimized: this.hass.themes?.darkMode,
-                  })}
-                />
-                <span class="content">${this._co2ConfigEntry.title}</span>
-                <a
-                  href=${`/config/integrations/integration/${this._co2ConfigEntry?.domain}`}
-                >
-                  <ha-icon-button .path=${mdiPencil}></ha-icon-button>
-                </a>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.grid.remove_co2_signal"
-                  )}
-                  @click=${this._removeCO2Sensor}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>`
+            ? html`
+                <div class="items-container">
+                  <div class="row" .entry=${this._co2ConfigEntry}>
+                    <img
+                      alt=""
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                      src=${brandsUrl({
+                        domain: "co2signal",
+                        type: "icon",
+                        darkOptimized: this.hass.themes?.darkMode,
+                      })}
+                    />
+                    <span class="content">${this._co2ConfigEntry.title}</span>
+                    <a
+                      href=${`/config/integrations/integration/${this._co2ConfigEntry?.domain}`}
+                    >
+                      <ha-icon-button .path=${mdiPencil}></ha-icon-button>
+                    </a>
+                    <ha-icon-button
+                      .label=${this.hass.localize(
+                        "ui.panel.config.energy.grid.remove_co2_signal"
+                      )}
+                      @click=${this._removeCO2Sensor}
+                      .path=${mdiDelete}
+                    ></ha-icon-button>
+                  </div>
+                </div>
+              `
             : html`
-                <div class="row border-bottom">
-                  <img
-                    alt=""
-                    crossorigin="anonymous"
-                    referrerpolicy="no-referrer"
-                    src=${brandsUrl({
-                      domain: "co2signal",
-                      type: "icon",
-                      darkOptimized: this.hass.themes?.darkMode,
-                    })}
-                  />
+                <div class="row">
                   <ha-button
                     @click=${this._addCO2Sensor}
                     appearance="filled"

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -59,7 +59,7 @@ export class EnergySolarSettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.solar.title")}
@@ -85,53 +85,55 @@ export class EnergySolarSettings extends LitElement {
               ></ha-energy-validation-result>
             `
           )}
-
-          <h3>
-            ${this.hass.localize(
-              "ui.panel.config.energy.solar.solar_production"
-            )}
-          </h3>
-          ${solarSources.map((source) => {
-            const entityState = this.hass.states[source.stat_energy_from];
-            return html`
-              <div class="row" .source=${source}>
-                ${entityState?.attributes.icon
-                  ? html`<ha-icon
-                      .icon=${entityState.attributes.icon}
-                    ></ha-icon>`
-                  : html`<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>`}
-                <span class="content"
-                  >${getStatisticLabel(
-                    this.hass,
-                    source.stat_energy_from,
-                    this.statsMetadata?.[source.stat_energy_from]
-                  )}</span
-                >
-                ${this.info
-                  ? html`
-                      <ha-icon-button
-                        .label=${this.hass.localize(
-                          "ui.panel.config.energy.solar.edit_solar_production"
-                        )}
-                        @click=${this._editSource}
-                        .path=${mdiPencil}
-                      ></ha-icon-button>
-                    `
-                  : ""}
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.solar.delete_solar_production"
-                  )}
-                  @click=${this._deleteSource}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
+          ${solarSources.length > 0
+            ? html`
+                <div class="items-container">
+                  ${solarSources.map((source) => {
+                    const entityState =
+                      this.hass.states[source.stat_energy_from];
+                    return html`
+                      <div class="row" .source=${source}>
+                        ${entityState?.attributes.icon
+                          ? html`<ha-icon
+                              .icon=${entityState.attributes.icon}
+                            ></ha-icon>`
+                          : html`<ha-svg-icon
+                              .path=${mdiSolarPower}
+                            ></ha-svg-icon>`}
+                        <span class="content"
+                          >${getStatisticLabel(
+                            this.hass,
+                            source.stat_energy_from,
+                            this.statsMetadata?.[source.stat_energy_from]
+                          )}</span
+                        >
+                        ${this.info
+                          ? html`
+                              <ha-icon-button
+                                .label=${this.hass.localize(
+                                  "ui.panel.config.energy.solar.edit_solar_production"
+                                )}
+                                @click=${this._editSource}
+                                .path=${mdiPencil}
+                              ></ha-icon-button>
+                            `
+                          : ""}
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.solar.delete_solar_production"
+                          )}
+                          @click=${this._deleteSource}
+                          .path=${mdiDelete}
+                        ></ha-icon-button>
+                      </div>
+                    `;
+                  })}
+                </div>
+              `
+            : ""}
           ${this.info
             ? html`
-                <div class="row border-bottom">
-                  <ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
+                <div class="row">
                   <ha-button
                     @click=${this._addSource}
                     appearance="filled"

src/panels/config/energy/components/ha-energy-water-settings.ts

@@ -55,7 +55,7 @@ export class EnergyWaterSettings extends LitElement {
     });
 
     return html`
-      <ha-card outlined>
+      <ha-card>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.water.title")}
@@ -81,46 +81,47 @@ export class EnergyWaterSettings extends LitElement {
               ></ha-energy-validation-result>
             `
           )}
-          <h3>
-            ${this.hass.localize(
-              "ui.panel.config.energy.water.water_consumption"
-            )}
-          </h3>
-          ${waterSources.map((source) => {
-            const entityState = this.hass.states[source.stat_energy_from];
-            return html`
-              <div class="row" .source=${source}>
-                ${entityState?.attributes.icon
-                  ? html`<ha-icon
-                      .icon=${entityState.attributes.icon}
-                    ></ha-icon>`
-                  : html`<ha-svg-icon .path=${mdiWater}></ha-svg-icon>`}
-                <span class="content"
-                  >${getStatisticLabel(
-                    this.hass,
-                    source.stat_energy_from,
-                    this.statsMetadata?.[source.stat_energy_from]
-                  )}</span
-                >
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.water.edit_water_source"
-                  )}
-                  @click=${this._editSource}
-                  .path=${mdiPencil}
-                ></ha-icon-button>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.water.delete_water_source"
-                  )}
-                  @click=${this._deleteSource}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
-          <div class="row border-bottom">
-            <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
+          ${waterSources.length > 0
+            ? html`
+                <div class="items-container">
+                  ${waterSources.map((source) => {
+                    const entityState =
+                      this.hass.states[source.stat_energy_from];
+                    return html`
+                      <div class="row" .source=${source}>
+                        ${entityState?.attributes.icon
+                          ? html`<ha-icon
+                              .icon=${entityState.attributes.icon}
+                            ></ha-icon>`
+                          : html`<ha-svg-icon .path=${mdiWater}></ha-svg-icon>`}
+                        <span class="content"
+                          >${getStatisticLabel(
+                            this.hass,
+                            source.stat_energy_from,
+                            this.statsMetadata?.[source.stat_energy_from]
+                          )}</span
+                        >
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.water.edit_water_source"
+                          )}
+                          @click=${this._editSource}
+                          .path=${mdiPencil}
+                        ></ha-icon-button>
+                        <ha-icon-button
+                          .label=${this.hass.localize(
+                            "ui.panel.config.energy.water.delete_water_source"
+                          )}
+                          @click=${this._deleteSource}
+                          .path=${mdiDelete}
+                        ></ha-icon-button>
+                      </div>
+                    `;
+                  })}
+                </div>
+              `
+            : ""}
+          <div class="row">
             <ha-button
               @click=${this._addSource}
               appearance="filled"

src/panels/config/energy/components/styles.ts

@@ -1,9 +1,6 @@
 import { css } from "lit";
 
 export const energyCardStyles = css`
-  ha-card {
-    height: 100%;
-  }
   .card-header ha-svg-icon {
     height: 32px;
     width: 32px;
@@ -19,7 +16,6 @@ export const energyCardStyles = css`
   .row {
     display: flex;
     align-items: center;
-    border-top: 1px solid var(--divider-color);
     height: 48px;
     box-sizing: border-box;
   }
@@ -42,4 +38,23 @@ export const energyCardStyles = css`
   ha-icon-button {
     color: var(--secondary-text-color);
   }
+  p {
+    color: var(--secondary-text-color);
+  }
+  p a {
+    color: var(--primary-color);
+  }
+  hr {
+    border: none;
+    border-top: 1px solid var(--divider-color);
+    margin: 24px calc(var(--ha-space-4) * -1);
+  }
+  .items-container {
+    border: 1px solid var(--ha-color-border-neutral-quiet);
+    border-radius: var(--ha-border-radius-lg);
+    padding: var(--ha-space-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ha-space-2);
+  }
 `;

src/panels/config/energy/ha-config-energy.ts

@@ -100,7 +100,7 @@ class HaConfigEnergy extends LitElement {
         <ha-alert>
           ${this.hass.localize("ui.panel.config.energy.new_device_info")}
         </ha-alert>
-        <div class="container">
+        <div class="content">
           <ha-energy-grid-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
@@ -235,15 +235,28 @@ class HaConfigEnergy extends LitElement {
     return [
       haStyle,
       css`
+        .content {
+          padding: 0 var(--ha-space-5);
+          max-width: 1040px;
+          margin: 0 auto;
+        }
+
         ha-alert {
           display: block;
-          margin: 8px;
+          margin: 12px auto;
+          max-width: 600px;
         }
-        .container {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-          grid-gap: 8px 8px;
-          margin: 8px;
+
+        ha-energy-grid-settings,
+        ha-energy-solar-settings,
+        ha-energy-battery-settings,
+        ha-energy-gas-settings,
+        ha-energy-water-settings,
+        ha-energy-device-settings,
+        ha-energy-device-settings-water {
+          display: block;
+          max-width: 600px;
+          margin: 0 auto 12px;
         }
       `,
     ];

src/translations/en.json

@@ -3952,7 +3952,7 @@
             }
           },
           "device_consumption": {
-            "title": "Individual devices",
+            "title": "Individual electrical devices",
             "sub": "Tracking the energy usage of individual devices allows Home Assistant to break down your energy usage by device.",
             "learn_more": "More information on how to get started.",
             "add_stat": "Pick entity to track energy of",