Show script description in the more info dialog (#24507)

* Show script description in the more info dialog

* Use markdown

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

@@ -17,6 +17,7 @@ import { computeObjectId } from "../../../common/entity/compute_object_id";
 import { listenMediaQuery } from "../../../common/dom/media_query";
 import "../components/ha-more-info-state-header";
 import type { ExtEntityRegistryEntry } from "../../../data/entity_registry";
+import "../../../components/ha-markdown";
 
 @customElement("more-info-script")
 class MoreInfoScript extends LitElement {
@@ -56,10 +57,11 @@ class MoreInfoScript extends LitElement {
     }
     const stateObj = this.stateObj;
 
-    const fields =
+    const script =
       this.hass.services.script[
         this.entry?.unique_id || computeObjectId(this.stateObj.entity_id)
-      ]?.fields;
+      ];
+    const fields = script?.fields;
 
     const hasFields = fields && Object.keys(fields).length > 0;
 
@@ -82,6 +84,13 @@ class MoreInfoScript extends LitElement {
         .changedOverride=${this.stateObj.attributes.last_triggered || 0}
       ></ha-more-info-state-header>
 
+      ${script?.description
+        ? html`<ha-markdown
+            breaks
+            .content=${script.description}
+          ></ha-markdown>`
+        : nothing}
+
       <div class=${`queue ${hasQueue ? "has-queue" : ""}`}>
         ${hasQueue
           ? html`
@@ -227,6 +236,10 @@ class MoreInfoScript extends LitElement {
       --service-control-padding: 0;
       --service-control-items-border-top: none;
     }
+    ha-markdown {
+      text-align: center;
+      padding: 0 16px;
+    }
   `;
 }