Automation sidebar bottom fade and safe area fixes

src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts

@@ -60,6 +60,14 @@ export default class HaAutomationSidebarCard extends LitElement {
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     this._contentSize.observe(this._contentElement);
+    this._updateHeaderHeight();
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has("hass") || _changedProperties.has("narrow")) {
+      this._updateHeaderHeight();
+    }
   }
 
   protected render() {
@@ -111,13 +119,9 @@ export default class HaAutomationSidebarCard extends LitElement {
         <div class="card-content" @scroll=${this._onScroll}>
           <slot></slot>
         </div>
-        ${this.narrow
-          ? html`
-              <div
-                class="fade ${this._contentScrollable ? "scrollable" : ""}"
-              ></div>
-            `
-          : nothing}
+        <div
+          class=${classMap({ fade: true, scrollable: this._contentScrollable })}
+        ></div>
       </ha-card>
     `;
   }
@@ -131,9 +135,13 @@ export default class HaAutomationSidebarCard extends LitElement {
   }
 
   private _canScrollDown(element: HTMLElement) {
+    const safeAreaInsetBottom =
+      parseFloat(
+        getComputedStyle(element).getPropertyValue("--safe-area-inset-bottom")
+      ) || 0;
     this._contentScrollable =
       (element.scrollHeight ?? 0) - (element.clientHeight ?? 0) >
-      (element.scrollTop ?? 0);
+      (element.scrollTop ?? 0) + safeAreaInsetBottom + 16;
   }
 
   private _closeSidebar() {
@@ -145,8 +153,22 @@ export default class HaAutomationSidebarCard extends LitElement {
     ev.preventDefault();
   }
 
+  private _updateHeaderHeight() {
+    requestAnimationFrame(() => {
+      const header = this.shadowRoot?.querySelector("ha-dialog-header");
+      if (header) {
+        const headerHeight = header.offsetHeight;
+        this.style.setProperty(
+          "--ha-dialog-header-height",
+          `${headerHeight}px`
+        );
+      }
+    });
+  }
+
   static styles = css`
     ha-card {
+      position: relative;
       height: 100%;
       width: 100%;
       border-color: var(--primary-color);
@@ -183,29 +205,44 @@ export default class HaAutomationSidebarCard extends LitElement {
     }
 
     .fade {
-      position: fixed;
-      bottom: -12px;
-      left: 0;
-      right: 0;
-      height: 12px;
+      position: absolute;
+      bottom: 1px;
+      left: 1px;
+      right: 1px;
+      height: 16px;
       pointer-events: none;
       transition: box-shadow 180ms ease-in-out;
+      background-color: var(
+        --ha-dialog-surface-background,
+        var(--mdc-theme-surface, #fff)
+      );
+      transform: rotate(180deg);
+      border-radius: var(--ha-card-border-radius);
+      border-bottom-left-radius: var(--ha-border-radius-square);
+      border-bottom-right-radius: var(--ha-border-radius-square);
     }
 
     .fade.scrollable {
       box-shadow: var(--bar-box-shadow);
-      transform: rotate(180deg);
     }
 
     .card-content {
-      max-height: calc(100% - 80px);
+      max-height: calc(
+        100% - max(var(--safe-area-inset-bottom, 0px), 16px) - var(
+            --ha-dialog-header-height
+          )
+      );
       overflow: auto;
       margin-top: 0;
     }
 
-    @media (min-width: 450px) and (min-height: 500px) {
+    @media all and (max-width: 870px) {
+      .fade {
+        border-radius: var(--ha-border-radius-square);
+      }
+
       .card-content {
-        max-height: calc(100% - 104px);
+        max-height: calc(100% - var(--ha-dialog-header-height) - 34px);
         overflow: auto;
       }
     }