Fix

Author: timmo001

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

@@ -115,16 +115,14 @@ export default class HaAutomationSidebarCard extends LitElement {
             class=${classMap({
               "fade-top": true,
               rounded: this.isWide,
-              visible: true,
-              // visible: this._contentScrolled,
+              visible: this._contentScrolled,
             })}
           ></div>
           <div
             class=${classMap({
               "fade-bottom": true,
               rounded: this.isWide,
-              visible: true,
-              // visible: this._contentScrollable,
+              visible: this._contentScrollable,
             })}
           ></div>
         </div>
@@ -196,14 +194,17 @@ export default class HaAutomationSidebarCard extends LitElement {
       }
 
       .card-content {
-        position: relative;
         flex: 1 1 auto;
         min-height: 0;
         overflow: auto;
         margin-top: 0;
         padding-bottom: max(var(--safe-area-inset-bottom, 0px), 32px);
       }
 
+      .fade-top {
+        top: var(--ha-space-17);
+      }
+
       @media all and (max-width: 870px) {
         .card-content {
           padding-bottom: 42px;

src/resources/styles.ts

@@ -239,6 +239,7 @@ export const scrollableFadeStyles = css`
     pointer-events: none;
     transition: opacity 180ms ease-in-out;
     background: linear-gradient(to bottom, rgba(17, 17, 17, 0.4), transparent);
+    border-radius: var(--ha-border-radius-square);
     z-index: 100;
     opacity: 0;
   }
@@ -269,11 +270,6 @@ export const scrollableFadeStyles = css`
     border-bottom-left-radius: var(--ha-border-radius-square);
     border-bottom-right-radius: var(--ha-border-radius-square);
   }
-
-  .fade-top:not(.rounded),
-  .fade-bottom:not(.rounded) {
-    border-radius: var(--ha-border-radius-square);
-  }
 `;
 
 export const baseEntrypointStyles = css`