From 0582b8430db005cae6f79237657a4fe634c840e1 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:25:39 +0300
Subject: [PATCH] Update developer-tools-template.ts: add independent
 scrollbars for left & right panels for large screens (#23242)

* Update developer-tools-template.ts

* whitespace in pre

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* prettier

* Update developer-tools-template.ts

* Update developer-tools-template.ts

* prettier

* prettier!!!!

* prettier again

* prettier fight

* prettier

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* prettier

* prettier

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
---
 .../template/developer-tools-template.ts      | 63 ++++++++++++++-----
 1 file changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index f16f77bd1f..9486e5e84a 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -181,17 +181,21 @@ class HaPanelDevTemplate extends LitElement {
                 >`
               : nothing}
             ${this._templateResult
-              ? html`${this.hass.localize(
-                    "ui.panel.developer-tools.tabs.templates.result_type"
-                  )}:
-                  ${resultType}
-                  <!-- prettier-ignore -->
-                  <pre class="rendered ${classMap({
-                    [resultType]: resultType,
-                  })}"
-                  >${type === "object"
-                    ? JSON.stringify(this._templateResult.result, null, 2)
-                    : this._templateResult.result}</pre>
+              ? html`<pre
+                    class="rendered ${classMap({
+                      [resultType]: resultType,
+                    })}"
+                  >
+${type === "object"
+                      ? JSON.stringify(this._templateResult.result, null, 2)
+                      : this._templateResult.result}</pre
+                  >
+                  <p>
+                    ${this.hass.localize(
+                      "ui.panel.developer-tools.tabs.templates.result_type"
+                    )}:
+                    ${resultType}
+                  </p>
                   ${this._templateResult.listeners.time
                     ? html`
                         <p>
@@ -281,6 +285,16 @@ class HaPanelDevTemplate extends LitElement {
             max(16px, env(safe-area-inset-left));
         }
 
+        .content.horizontal {
+          --code-mirror-max-height: calc(
+            100vh - var(--header-height) -
+              (var(--paper-font-body1_-_line-height) * 3) - (1em * 2) -
+              (max(16px, env(safe-area-inset-top)) * 2) -
+              (max(16px, env(safe-area-inset-bottom)) * 2) -
+              (var(--ha-card-border-width, 1px) * 2) - 179px
+          );
+        }
+
         ha-card {
           margin-bottom: 16px;
         }
@@ -293,8 +307,9 @@ class HaPanelDevTemplate extends LitElement {
           color: var(--primary-color);
         }
 
-        .horizontal .edit-pane {
-          max-width: 50%;
+        .content.horizontal > * {
+          width: 50%;
+          margin-bottom: 0px;
         }
 
         .render-spinner {
@@ -316,15 +331,35 @@ class HaPanelDevTemplate extends LitElement {
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
           padding: 8px;
+          margin-top: 0;
+          margin-bottom: 0;
           direction: ltr;
         }
 
+        p,
+        ul {
+          margin-block-end: 0;
+        }
+
+        .content.horizontal .render-pane .card-content {
+          overflow: auto;
+          max-height: calc(
+            var(--code-mirror-max-height) +
+              47px - var(--ha-card-border-radius, 12px)
+          );
+        }
+
+        .content.horizontal .render-pane {
+          overflow: hidden;
+          padding-bottom: var(--ha-card-border-radius, 12px);
+        }
+
         .all_listeners {
           color: var(--warning-color);
         }
 
         @media all and (max-width: 870px) {
-          .render-pane {
+          .content ha-card {
             max-width: 100%;
           }
         }