Fix Firefox

src/components/ha-sidebar.ts

@@ -27,11 +27,14 @@ import {
   subscribeNotifications,
 } from "../data/persistent_notification";
 import computeDomain from "../common/entity/compute_domain";
+import { classMap } from "lit-html/directives/class-map";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
 const computeUrl = (urlPath) => `/${urlPath}`;
 
+const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
+
 const SORT_VALUE = {
   map: 1,
   logbook: 2,
@@ -187,45 +190,49 @@ class HaSidebar extends LitElement {
               </a>
             `
           : ""}
+      </paper-listbox>
 
-        <div disabled class="divider sticky-el"></div>
+      <div class="divider"></div>
+
+      <paper-icon-item
+        class="notifications"
+        aria-role="option"
+        @click=${this._handleShowNotificationDrawer}
+      >
+        <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
+        ${notificationCount > 0
+          ? html`
+              <span class="notification-badge" slot="item-icon">
+                ${notificationCount}
+              </span>
+            `
+          : ""}
+        <span class="item-text">
+          ${hass.localize("ui.notification_drawer.title")}
+        </span>
+      </paper-icon-item>
+
+      <a
+        class=${classMap({
+          profile: true,
+          // Mimick behavior that paper-listbox provides
+          "iron-selected": hass.panelUrl === "profile",
+        })}
+        href="/profile"
+        data-panel="panel"
+        tabindex="-1"
+        aria-role="option"
+        aria-label=${hass.localize("panel.profile")}
+      >
+        <paper-icon-item>
+          <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
 
-        <paper-icon-item
-          class="notifications sticky-el"
-          aria-role="option"
-          @click=${this._handleShowNotificationDrawer}
-        >
-          <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
-          ${notificationCount > 0
-            ? html`
-                <span class="notification-badge" slot="item-icon">
-                  ${notificationCount}
-                </span>
-              `
-            : ""}
           <span class="item-text">
-            ${hass.localize("ui.notification_drawer.title")}
+            ${hass.user ? hass.user.name : ""}
           </span>
         </paper-icon-item>
-
+      </a>
-        <a
+      <div disabled class="bottom-spacer"></div>
-          class="profile sticky-el"
-          href="/profile"
-          data-panel="panel"
-          tabindex="-1"
-          aria-role="option"
-          aria-label=${hass.localize("panel.profile")}
-        >
-          <paper-icon-item>
-            <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
-
-            <span class="item-text">
-              ${hass.user ? hass.user.name : ""}
-            </span>
-          </paper-icon-item>
-        </a>
-        <div disabled class="bottom-spacer sticky-el"></div>
-      </paper-listbox>
     `;
   }
 
@@ -258,6 +265,7 @@ class HaSidebar extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+
     if (this.hass && this.hass.auth.external) {
       getExternalConfig(this.hass.auth.external).then((conf) => {
         this._externalConfig = conf;
@@ -279,6 +287,16 @@ class HaSidebar extends LitElement {
     if (changedProps.has("alwaysExpand")) {
       this.expanded = this.alwaysExpand;
     }
+    if (SUPPORT_SCROLL_IF_NEEDED && !changedProps.has("hass")) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) {
+      this.shadowRoot!.querySelector(
+        ".iron-selected"
+        // @ts-ignore
+      )!.scrollIntoViewIfNeeded();
+    }
   }
 
   private _contract() {
@@ -357,15 +375,15 @@ class HaSidebar extends LitElement {
       }
 
       paper-listbox {
-        padding: 4px 0 0;
+        padding: 4px 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
-        height: calc(100% - 65px);
+        height: calc(100% - 196px);
         overflow-y: auto;
       }
 
-      paper-listbox > a {
+      a {
         color: var(--sidebar-text-color);
         font-weight: 500;
         font-size: 14px;
@@ -440,13 +458,9 @@ class HaSidebar extends LitElement {
       }
 
       .notifications {
-        margin-top: 0;
-        margin-bottom: 0;
-        bottom: 72px;
         cursor: pointer;
       }
       .profile {
-        bottom: 24px;
       }
       .profile paper-icon-item {
         padding-left: 4px;
@@ -454,19 +468,6 @@ class HaSidebar extends LitElement {
       .profile .item-text {
         margin-left: 8px;
       }
-      .bottom-spacer {
-        bottom: 0;
-        padding: 12px 0;
-      }
-
-      .sticky-el {
-        position: -webkit-sticky;
-        position: sticky;
-        background-color: var(
-          --sidebar-background-color,
-          var(--primary-background-color)
-        );
-      }
 
       .notification-badge {
         position: absolute;