Visual alignment of automation and script more info dialogs (#8234)

src/dialogs/more-info/controls/more-info-automation.ts

@@ -57,7 +57,9 @@ class MoreInfoAutomation extends LitElement {
       }
       .actions {
         margin: 8px 0;
-        text-align: right;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
       }
     `;
   }

src/dialogs/more-info/controls/more-info-script.ts

@@ -1,5 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
+  css,
+  CSSResult,
   customElement,
   html,
   LitElement,
@@ -21,10 +23,12 @@ class MoreInfoScript extends LitElement {
     }
 
     return html`
+      <div class="flex">
         <div>
           ${this.hass.localize(
             "ui.dialogs.more_info_control.script.last_triggered"
           )}:
+        </div>
         ${this.stateObj.attributes.last_triggered
           ? html`
               <ha-relative-time
@@ -36,6 +40,15 @@ class MoreInfoScript extends LitElement {
       </div>
     `;
   }
+
+  static get styles(): CSSResult {
+    return css`
+      .flex {
+        display: flex;
+        justify-content: space-between;
+      }
+    `;
+  }
 }
 
 declare global {