Use icon button for compare on narrow (#12831)

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -851,7 +851,9 @@ export class HuiEnergySourcesTableCard
                       )}
                     </th>
                     ${compare
-                      ? html`<td class="mdc-data-table__cell">
+                      ? html`<td
+                            class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                          >
                             ${formatNumber(
                               totalGasCostCompare + totalGridCostCompare,
                               this.hass.locale,
@@ -862,9 +864,7 @@ export class HuiEnergySourcesTableCard
                             )}
                           </td>
                           ${showCosts
-                            ? html`<td
+                            ? html`<td class="mdc-data-table__cell"></td>`
-                                class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                              ></td>`
                             : ""}`
                       : ""}
                     <td class="mdc-data-table__cell"></td>

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -1,5 +1,10 @@
 import "@material/mwc-button/mwc-button";
-import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+import {
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiCompare,
+  mdiCompareRemove,
+} from "@mdi/js";
 import {
   addDays,
   addMonths,
@@ -40,13 +45,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
 
   @property() public collectionKey?: string;
 
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
   @state() _startDate?: Date;
 
   @state() _endDate?: Date;
 
   @state() private _period?: "day" | "week" | "month" | "year";
 
-  @state() private _compare? = false;
+  @state() private _compare = false;
 
   public connectedCallback() {
     super.connectedCallback();
@@ -136,14 +143,24 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             dense
             @value-changed=${this._handleView}
           ></ha-button-toggle-group>
-          <mwc-button
+          ${this.narrow
+            ? html`<ha-icon-button
+                class="compare ${this._compare ? "active" : ""}"
+                .path=${this._compare ? mdiCompareRemove : mdiCompare}
+                @click=${this._toggleCompare}
+                dense
+                outlined
+              >
+                Compare data
+              </ha-icon-button>`
+            : html`<mwc-button
                 class="compare ${this._compare ? "active" : ""}"
                 @click=${this._toggleCompare}
                 dense
                 outlined
               >
                 Compare data
-          </mwc-button>
+              </mwc-button>`}
         </div>
       </div>
     `;
@@ -260,9 +277,6 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       :host([narrow]) .row {
         flex-direction: column-reverse;
       }
-      :host([narrow]) .period {
-        margin-bottom: 8px;
-      }
       .label {
         display: flex;
         justify-content: flex-end;
@@ -275,6 +289,17 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         justify-content: flex-end;
         align-items: flex-end;
       }
+      :host([narrow]) .period {
+        margin-bottom: 8px;
+      }
+      mwc-button {
+        margin-left: 8px;
+      }
+      ha-icon-button {
+        margin-left: 4px;
+        --mdc-icon-size: 20px;
+      }
+      ha-icon-button.active::before,
       mwc-button.active::before {
         top: 0;
         left: 0;
@@ -288,14 +313,11 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         transition: opacity 15ms linear, background-color 15ms linear;
         opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
       }
+      ha-icon-button.active::before {
+        border-radius: 50%;
+      }
       .compare {
         position: relative;
-        margin-left: 8px;
-        width: max-content;
-      }
-      :host([narrow]) .compare {
-        margin-left: auto;
-        margin-top: 8px;
       }
       :host {
         --mdc-button-outline-color: currentColor;