Fix testing condition in iOS (#26879)

src/components/ha-bottom-sheet.ts

@@ -232,7 +232,6 @@ export class HaBottomSheet extends LitElement {
       box-shadow: var(--wa-shadow-l);
       padding: 0;
       margin: 0;
-
       top: auto;
       inset-inline-end: auto;
       bottom: 0;

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

@@ -171,7 +171,6 @@ export default class HaAutomationSidebarCard extends LitElement {
       transition: box-shadow 180ms ease-in-out;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      z-index: 6;
       position: relative;
       background-color: var(
         --ha-dialog-surface-background,
@@ -201,6 +200,7 @@ export default class HaAutomationSidebarCard extends LitElement {
     .card-content {
       max-height: calc(100% - 80px);
       overflow: auto;
+      margin-top: 0;
     }
 
     @media (min-width: 450px) and (min-height: 500px) {

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

@@ -65,6 +65,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         }
       }
     }
+    // Reset testing state when condition changes
+    if (changedProperties.has("sidebarKey")) {
+      this._testing = false;
+    }
   }
 
   protected render() {
@@ -283,11 +287,13 @@ export default class HaAutomationSidebarCondition extends LitElement {
               sidebar
             ></ha-automation-condition-editor>`
           )}
+      <div class="testing-wrapper">
         <div
           class="testing ${classMap({
             active: this._testing,
             pass: this._testingResult === true,
             error: this._testingResult === false,
+            narrow: this.narrow,
           })}"
         >
           ${this._testingResult
@@ -298,6 +304,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
                 "ui.panel.config.automation.editor.conditions.testing_error"
               )}
         </div>
+      </div>
     </ha-automation-sidebar-card>`;
   }
 
@@ -396,21 +403,13 @@ export default class HaAutomationSidebarCondition extends LitElement {
       ha-automation-sidebar-card {
         position: relative;
       }
-      .testing {
+      .testing-wrapper {
         position: absolute;
-        z-index: 6;
         top: 0px;
         right: 0px;
         left: 0px;
-        text-transform: uppercase;
-        font-size: var(--ha-font-size-m);
-        font-weight: var(--ha-font-weight-bold);
-        background-color: var(--divider-color, #e0e0e0);
-        color: var(--text-primary-color);
-        max-height: 0px;
+        margin: -1px;
         overflow: hidden;
-        transition: max-height 0.3s;
-        text-align: center;
         border-top-right-radius: var(
           --ha-card-border-radius,
           var(--ha-border-radius-lg)
@@ -419,15 +418,33 @@ export default class HaAutomationSidebarCondition extends LitElement {
           --ha-card-border-radius,
           var(--ha-border-radius-lg)
         );
+        pointer-events: none;
+        height: 100px;
+      }
+      .testing {
+        --testing-color: var(--divider-color, #e0e0e0);
+        text-transform: uppercase;
+        font-size: var(--ha-font-size-m);
+        font-weight: var(--ha-font-weight-bold);
+        background-color: var(--testing-color);
+        color: var(--text-primary-color);
+        max-height: 0px;
+        transition:
+          max-height 0.3s ease-in-out,
+          padding-top 0.3s ease-in-out;
+        text-align: center;
+      }
+      .testing.active.narrow {
+        padding-top: 16px;
       }
       .testing.active {
-        max-height: 100px;
+        max-height: 100%;
       }
       .testing.error {
-        background-color: var(--accent-color);
+        --testing-color: var(--accent-color);
       }
       .testing.pass {
-        background-color: var(--success-color);
+        --testing-color: var(--success-color);
       }
     `,
   ];

src/panels/config/automation/styles.ts

@@ -217,7 +217,7 @@ export const automationRowsStyles = css`
 export const sidebarEditorStyles = css`
   .sidebar-editor {
     display: block;
-    padding-top: 16px;
+    padding-top: 8px;
   }
   .description {
     padding-top: 16px;