Add has-fab to hass-tabs-subpage (#25536)

src/layouts/hass-tabs-subpage.ts

@@ -3,15 +3,15 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
+import { canShowPage } from "../common/config/can_show_page";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
 import "../components/ha-tab";
-import type { HomeAssistant, Route } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
-import { canShowPage } from "../common/config/can_show_page";
+import type { HomeAssistant, Route } from "../types";
 
 export interface PageNavigation {
   path: string;
@@ -52,6 +52,12 @@ class HassTabsSubpage extends LitElement {
 
   @property({ type: Boolean }) public pane = false;
 
+  /**
+   * Do we need to add padding for a fab.
+   * @type {Boolean}
+   */
+  @property({ type: Boolean, attribute: "has-fab" }) public hasFab = false;
+
   @state() private _activeTab?: PageNavigation;
 
   // @ts-ignore
@@ -178,6 +184,7 @@ class HassTabsSubpage extends LitElement {
           @scroll=${this._saveScrollPos}
         >
           <slot></slot>
+          ${this.hasFab ? html`<div class="fab-bottom-space"></div>` : nothing}
         </div>
       </div>
       <div id="fab" class=${classMap({ tabs: showTabs })}>
@@ -336,6 +343,14 @@ class HassTabsSubpage extends LitElement {
           );
         }
 
+        .content .fab-bottom-space {
+          height: calc(64px + env(safe-area-inset-bottom));
+        }
+
+        :host([narrow]) .content.tabs .fab-bottom-space {
+          height: calc(80px + env(safe-area-inset-bottom));
+        }
+
         #fab {
           position: fixed;
           right: calc(16px + env(safe-area-inset-right));

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -148,6 +148,7 @@ export class HaConfigAreasDashboard extends LitElement {
         back-path="/config"
         .tabs=${configSections.areas}
         .route=${this.route}
+        has-fab
       >
         <ha-icon-button
           slot="toolbar-icon"

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -447,6 +447,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.devices}
+        has-fab
       >
         ${this.narrow
           ? html`
@@ -984,9 +985,6 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           grid-gap: 8px 8px;
           padding: 8px 16px 16px;
         }
-        .container:last-of-type {
-          margin-bottom: 64px;
-        }
         .empty-message {
           margin: auto;
           text-align: center;

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -1,48 +1,48 @@
 import "@material/mwc-button/mwc-button";
 import {
+  mdiAlertCircle,
+  mdiCheckCircle,
   mdiFolderMultipleOutline,
   mdiLan,
   mdiNetwork,
-  mdiPlus,
   mdiPencil,
-  mdiCheckCircle,
+  mdiPlus,
-  mdiAlertCircle,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { ConfigEntry } from "../../../../../data/config_entries";
+import "../../../../../components/buttons/ha-progress-button";
-import { getConfigEntries } from "../../../../../data/config_entries";
+import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-fab";
-import "../../../../../components/ha-icon-button";
-import { fileDownload } from "../../../../../util/file_download";
-import "../../../../../components/ha-icon-next";
-import "../../../../../layouts/hass-tabs-subpage";
-import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
-import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
-import "../../../ha-config-section";
 import "../../../../../components/ha-form/ha-form";
-import "../../../../../components/buttons/ha-progress-button";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
-import "../../../../../components/ha-alert";
+import type { ConfigEntry } from "../../../../../data/config_entries";
-import { showZHAChangeChannelDialog } from "./show-dialog-zha-change-channel";
+import { getConfigEntries } from "../../../../../data/config_entries";
 import type {
   ZHAConfiguration,
-  ZHANetworkSettings,
   ZHANetworkBackupAndMetadata,
+  ZHANetworkSettings,
 } from "../../../../../data/zha";
 import {
-  fetchZHAConfiguration,
-  updateZHAConfiguration,
-  fetchZHANetworkSettings,
   createZHANetworkBackup,
   fetchDevices,
+  fetchZHAConfiguration,
+  fetchZHANetworkSettings,
+  updateZHAConfiguration,
 } from "../../../../../data/zha";
+import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
 import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import "../../../../../layouts/hass-tabs-subpage";
+import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import { fileDownload } from "../../../../../util/file_download";
+import "../../../ha-config-section";
+import { showZHAChangeChannelDialog } from "./show-dialog-zha-change-channel";
 
 const MULTIPROTOCOL_ADDON_URL = "socket://core-silabs-multiprotocol:9999";
 
@@ -108,6 +108,7 @@ class ZHAConfigDashboard extends LitElement {
         .route=${this.route}
         .tabs=${zhaTabs}
         back-path="/config/integrations"
+        has-fab
       >
         <ha-card class="content network-status">
           ${this._error

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -43,6 +43,7 @@ import {
   subscribeZwaveControllerStatistics,
   subscribeZwaveNVMBackup,
 } from "../../../../../data/zwave_js";
+import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
 import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
 import "../../../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
@@ -53,7 +54,6 @@ import { showZWaveJSAddNodeDialog } from "./add-node/show-dialog-zwave_js-add-no
 import { showZWaveJSRebuildNetworkRoutesDialog } from "./show-dialog-zwave_js-rebuild-network-routes";
 import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node";
 import { configTabs } from "./zwave_js-config-router";
-import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
 
 @customElement("zwave_js-config-dashboard")
 class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
@@ -142,6 +142,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${configTabs}
+        has-fab
       >
         <ha-icon-button
           slot="toolbar-icon"

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

@@ -65,6 +65,7 @@ export class HaConfigPerson extends LitElement {
         .route=${this.route}
         back-path="/config"
         .tabs=${configSections.persons}
+        has-fab
       >
         <ha-config-section .isWide=${this.isWide}>
           <span slot="header"

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

@@ -238,6 +238,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
           ? undefined
           : "/config"}
         .tabs=${configSections.areas}
+        has-fab
       >
         ${this.narrow
           ? html`
@@ -581,9 +582,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       min-height: 100%;
       box-sizing: border-box;
     }
-    ha-card {
-      margin-bottom: 100px;
-    }
     ha-tooltip {
       display: block;
     }