Move live condition test inline

src/components/automation/ha-automation-row-live-test.ts

@@ -32,10 +32,10 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   static styles = css`
     :host {
-      position: absolute;
-      top: -5px;
-      inset-inline-end: -6px;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      margin-inline-start: var(--ha-space-1);
     }
     #indicator {
       width: 10px;

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

@@ -217,19 +217,11 @@ export default class HaAutomationConditionRow extends LitElement {
           .hass=${this.hass}
           .condition=${this.condition.condition}
         ></ha-condition-icon>
-        ${this.optionsInSidebar && this.condition.condition !== "trigger"
-          ? html`<ha-automation-row-live-test
-              .state=${this._liveTestResult.state}
-              .label=${this.hass.localize(
-                `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
-              )}
-            ></ha-automation-row-live-test>`
-          : nothing}
       </div>
       ${this.optionsInSidebar &&
       this.condition.condition !== "trigger" &&
       this._liveTestResult.message
-        ? html`<ha-tooltip for="condition-icon" slot="leading-icon"
+        ? html`<ha-tooltip for="condition-live-test" slot="leading-icon"
             >${this._liveTestResult.message}</ha-tooltip
           >`
         : nothing}
@@ -245,6 +237,15 @@ export default class HaAutomationConditionRow extends LitElement {
               this.condition.condition !== "device"
             )
           : nothing}
+        ${this.optionsInSidebar && this.condition.condition !== "trigger"
+          ? html`<ha-automation-row-live-test
+              id="condition-live-test"
+              .state=${this._liveTestResult.state}
+              .label=${this.hass.localize(
+                `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
+              )}
+            ></ha-automation-row-live-test>`
+          : nothing}
         ${this.condition.note?.trim()
           ? html`
               <ha-svg-icon

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -239,17 +239,9 @@ export class HaCardConditionEditor extends LitElement {
             <ha-svg-icon
               .path=${ICON_CONDITION[condition.condition]}
             ></ha-svg-icon>
-            ${hideLiveTest
-              ? nothing
-              : html`<ha-automation-row-live-test
-                  .state=${this._liveTestResult.state}
-                  .label=${this.hass.localize(
-                    `ui.panel.lovelace.editor.condition-editor.live_test_state.${this._liveTestResult.state}`
-                  )}
-                ></ha-automation-row-live-test>`}
           </div>
           ${!hideLiveTest && this._liveTestResult.message
-            ? html`<ha-tooltip for="condition-icon" slot="leading-icon"
+            ? html`<ha-tooltip for="condition-live-test" slot="leading-icon"
                 >${this._liveTestResult.message}</ha-tooltip
               >`
             : nothing}
@@ -257,6 +249,15 @@ export class HaCardConditionEditor extends LitElement {
             ${this.hass.localize(
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
             ) || condition.condition}
+            ${!hideLiveTest
+              ? html`<ha-automation-row-live-test
+                  id="condition-live-test"
+                  .state=${this._liveTestResult.state}
+                  .label=${this.hass.localize(
+                    `ui.panel.lovelace.editor.condition-editor.live_test_state.${this._liveTestResult.state}`
+                  )}
+                ></ha-automation-row-live-test>`
+              : nothing}
           </h3>
           <ha-automation-row-event-chip
             .show=${this._testingResult !== undefined}