Update styling on Template dev-tools (#21661)

* Update styling on Template dev-tools

* Remove unnecessary divs

src/panels/developer-tools/template/developer-tools-template.ts

@@ -88,13 +88,8 @@ class HaPanelDevTemplate extends LitElement {
           : "dict"
         : type;
     return html`
-      <div
-        class="content ${classMap({
-          layout: !this.narrow,
-          horizontal: !this.narrow,
-        })}"
-      >
-        <div class="edit-pane">
+      <div class="content">
+        <div class="description">
           <p>
             ${this.hass.localize(
               "ui.panel.developer-tools.tabs.templates.description"
@@ -126,11 +121,21 @@ class HaPanelDevTemplate extends LitElement {
               >
             </li>
           </ul>
-          <p>
-            ${this.hass.localize(
+        </div>
+      </div>
+      <div
+        class="content ${classMap({
+          layout: !this.narrow,
+          horizontal: !this.narrow,
+        })}"
+      >
+        <ha-card
+          class="edit-pane"
+          header=${this.hass.localize(
             "ui.panel.developer-tools.tabs.templates.editor"
           )}
-          </p>
+        >
+          <div class="card-content">
             <ha-code-editor
               mode="jinja2"
               .hass=${this.hass}
@@ -142,6 +147,8 @@ class HaPanelDevTemplate extends LitElement {
               @value-changed=${this._templateChanged}
               dir="ltr"
             ></ha-code-editor>
+          </div>
+          <div class="card-actions">
             <mwc-button @click=${this._restoreDemo}>
               ${this.hass.localize(
                 "ui.panel.developer-tools.tabs.templates.reset"
@@ -151,8 +158,15 @@ class HaPanelDevTemplate extends LitElement {
               ${this.hass.localize("ui.common.clear")}
             </mwc-button>
           </div>
+        </ha-card>
 
-        <div class="render-pane">
+        <ha-card
+          class="render-pane"
+          header=${this.hass.localize(
+            "ui.panel.developer-tools.tabs.templates.result"
+          )}
+        >
+          <div class="card-content">
             ${this._rendering
               ? html`<ha-circular-progress
                   class="render-spinner"
@@ -243,6 +257,7 @@ class HaPanelDevTemplate extends LitElement {
                           : nothing}`
               : nothing}
           </div>
+        </ha-card>
       </div>
     `;
   }
@@ -258,6 +273,7 @@ class HaPanelDevTemplate extends LitElement {
         }
 
         .content {
+          gap: 16px;
           padding: 16px;
           padding: max(16px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
@@ -265,10 +281,11 @@ class HaPanelDevTemplate extends LitElement {
             max(16px, env(safe-area-inset-left));
         }
 
+        ha-card {
+          margin-bottom: 16px;
+        }
+
         .edit-pane {
-          margin-right: 16px;
-          margin-inline-start: initial;
-          margin-inline-end: 16px;
           direction: var(--direction);
         }
 
@@ -280,12 +297,6 @@ class HaPanelDevTemplate extends LitElement {
           max-width: 50%;
         }
 
-        .render-pane {
-          position: relative;
-          max-width: 50%;
-          flex: 1;
-        }
-
         .render-spinner {
           position: absolute;
           top: 8px;

src/translations/en.json

@@ -6850,6 +6850,7 @@
             "title": "Template",
             "description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
             "editor": "Template editor",
+            "result": "Result",
             "reset": "Reset to demo template",
             "confirm_reset": "Do you want to reset your current template back to the demo template?",
             "confirm_clear": "Do you want to clear your current template?",