Fix selection mode backups on mobile (#23389)

* Fix selection mode backups on mobile

* Update ha-config-backup-details.ts

* unselect when deleting

src/components/ha-fab.ts

@@ -20,7 +20,8 @@ export class HaFab extends FabBase {
         direction: var(--direction);
       }
       :disabled {
-        opacity: var(--light-disabled-opacity);
+        --mdc-theme-secondary: var(--disabled-text-color);
+        pointer-events: none;
       }
     `,
     // safari workaround - must be explicit

src/panels/config/backup/ha-config-backup-backups.ts

@@ -7,9 +7,8 @@ import {
   mdiUpload,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
@@ -346,39 +345,27 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           </ha-button-menu>
         </div>
 
-        ${this._selected.length
-          ? html`<div
-              class=${classMap({
-                "header-toolbar": this.narrow,
-                "table-header": !this.narrow,
-              })}
-              slot="header"
-            >
-              <p class="selected-txt">
-                ${this._selected.length} backups selected
-              </p>
-              <div class="header-btns">
-                ${!this.narrow
-                  ? html`
-                      <ha-button @click=${this._deleteSelected} class="warning">
-                        Delete selected
-                      </ha-button>
-                    `
-                  : html`
-                      <ha-icon-button
-                        .label=${"Delete selected"}
-                        .path=${mdiDelete}
-                        id="delete-btn"
-                        class="warning"
-                        @click=${this._deleteSelected}
-                      ></ha-icon-button>
-                      <simple-tooltip animation-delay="0" for="delete-btn">
-                        Delete selected
-                      </simple-tooltip>
-                    `}
-              </div>
-            </div> `
-          : nothing}
+        <div slot="selection-bar">
+          ${!this.narrow
+            ? html`
+                <ha-button @click=${this._deleteSelected} class="warning">
+                  Delete selected
+                </ha-button>
+              `
+            : html`
+                <ha-icon-button
+                  .label=${"Delete selected"}
+                  .path=${mdiDelete}
+                  id="delete-btn"
+                  class="warning"
+                  @click=${this._deleteSelected}
+                ></ha-icon-button>
+                <simple-tooltip animation-delay="0" for="delete-btn">
+                  Delete selected
+                </simple-tooltip>
+              `}
+        </div>
+
         <ha-filter-states
           .hass=${this.hass}
           label="Type"
@@ -502,6 +489,9 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     }
 
     await deleteBackup(this.hass, backup.backup_id);
+    if (this._selected.includes(backup.backup_id)) {
+      this._selected = this._selected.filter((id) => id !== backup.backup_id);
+    }
     fireEvent(this, "ha-refresh-backup-info");
   }
 
@@ -533,69 +523,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .header {
-          padding: 16px 16px 0 16px;
-          display: flex;
-          flex-direction: row;
-          gap: 16px;
-          background-color: var(--primary-background-color);
-        }
-        @media (max-width: 1000px) {
-          .header {
-            flex-direction: column;
-          }
-        }
-        .header > * {
-          flex: 1;
-          min-width: 0;
-        }
-
-        ha-fab[disabled] {
-          --mdc-theme-secondary: var(--disabled-text-color) !important;
-        }
-
-        .table-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          height: var(--header-height);
-          box-sizing: border-box;
-        }
-        .header-toolbar {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          color: var(--secondary-text-color);
-          position: relative;
-          top: -4px;
-        }
-        .selected-txt {
-          font-weight: bold;
-          padding-left: 16px;
-          padding-inline-start: 16px;
-          padding-inline-end: initial;
-          color: var(--primary-text-color);
-        }
-        .table-header .selected-txt {
-          margin-top: 20px;
-        }
-        .header-toolbar .selected-txt {
-          font-size: 16px;
-        }
-        .header-toolbar .header-btns {
-          margin-right: -12px;
-          margin-inline-end: -12px;
-          margin-inline-start: initial;
-        }
-        .header-btns > ha-button,
-        .header-btns > ha-icon-button {
-          margin: 8px;
-        }
-      `,
-    ];
+    return haStyle;
   }
 }
 

src/panels/config/backup/ha-config-backup-details.ts

@@ -338,6 +338,7 @@ class HaConfigBackupDetails extends LitElement {
       margin: 0 auto;
       gap: 24px;
       display: grid;
+      margin-bottom: 24px;
     }
     .card-content {
       padding: 0 20px 8px 20px;

src/panels/config/backup/ha-config-backup-overview.ts

@@ -258,10 +258,6 @@ class HaConfigBackupOverview extends LitElement {
           padding-left: 0;
           padding-right: 0;
         }
-        ha-fab[disabled] {
-          --mdc-theme-secondary: var(--disabled-text-color) !important;
-          pointer-events: none;
-        }
       `,
     ];
   }