Dev tools -> Template: add scrollbars

Feature Requests
1

In case of large templates and large content in the “output” panel, it is necessary to have scrollbars:

image
image1920×1119 243 KB

I managed to add these scrollbars by specifying CSS properties in Code Inspector:

image
image1920×1119 309 KB

Revised 29.07.22:
for the class=".cm-editor":

max-height: 70vh;

for the class="rendered string":

max-height: 77vh;
overflow-y: scroll;
2

added my +1

However, Feature requests here are for core, not necessarily for Frontend, which your FR is about. You’d best add it to Discussions · home-assistant/frontend · GitHub, where the frontend team checks for valuable suggestions.
Since you’ve already gone in depth on the necessary changes, let’s hope they’d pick this up

3

PR made: Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens by ildar170975 · Pull Request #17765 · home-assistant/frontend · GitHub

4

New try after 2024.8:

image
image1871×995 83.1 KB

Meanwhile an external JS may be used:

customElements.whenDefined('developer-tools-template').then(() => {
  const TemplatePanel = customElements.get('developer-tools-template');
  const { html, css } = TemplatePanel.prototype;
  
  // defined added style
  const newStyle = css`
  .content.horizontal {
    --code-mirror-max-height: calc(100vh - 410px);
    max-height: calc(var(--code-mirror-max-height) + 150px);
  }
  .content.horizontal > * {
    width: 50%;
    margin-bottom: 0px;
  }
  .rendered {
    overflow: auto;
    max-height: calc(var(--code-mirror-max-height) - 30px);
  }
  `;

  const newStyles = [].concat(TemplatePanel.styles, newStyle);
  Object.defineProperty(TemplatePanel, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(TemplatePanel, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});