Fix scrolling items in the bottom into view (#26830)

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -739,12 +739,12 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -710,12 +710,12 @@ export default class HaAutomationConditionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 

src/panels/config/automation/manual-automation-editor.ts

@@ -274,7 +274,11 @@ export class HaManualAutomationEditor extends LitElement {
         })}
       >
         <div class="content-wrapper">
-          <div class="content">
+          <div
+            class="content ${this._sidebarConfig && this.narrow
+              ? "has-bottom-sheet"
+              : ""}"
+          >
             <slot name="alerts"></slot>
             ${this._renderContent()}
           </div>

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -408,12 +408,12 @@ export default class HaAutomationOptionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 

src/panels/config/automation/styles.ts

@@ -136,6 +136,11 @@ export const manualEditorStyles = css`
   .content {
     padding-top: 24px;
     padding-bottom: 72px;
+    transition: padding-bottom 180ms ease-in-out;
+  }
+
+  .content.has-bottom-sheet {
+    padding-bottom: calc(90vh - 72px);
   }
 
   ha-automation-sidebar {

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -520,12 +520,12 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._selected = true;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180);
     }
   }
 

src/panels/config/script/ha-script-field-row.ts

@@ -236,12 +236,12 @@ export default class HaScriptFieldRow extends LitElement {
     } satisfies ScriptFieldSidebarConfig);
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 

src/panels/config/script/ha-script-fields.ts

@@ -76,10 +76,12 @@ export default class HaScriptFields extends LitElement {
       row.focus();
 
       if (this.narrow) {
-        row.scrollIntoView({
+        window.setTimeout(() => {
-          block: "start",
+          row.scrollIntoView({
-          behavior: "smooth",
+            block: "start",
-        });
+            behavior: "smooth",
+          });
+        }, 180); // duration of transition of added padding for bottom sheet
       }
     });
   }

src/panels/config/script/manual-script-editor.ts

@@ -218,7 +218,11 @@ export class HaManualScriptEditor extends LitElement {
         })}
       >
         <div class="content-wrapper">
-          <div class="content">
+          <div
+            class="content ${this._sidebarConfig && this.narrow
+              ? "has-bottom-sheet"
+              : ""}"
+          >
             <slot name="alerts"></slot>
             ${this._renderContent()}
           </div>