Developer Tools: Template: move the render pane below the edit pane, instead of side by side

[backcountrymountains]

I often find myself testing out template logic in the Developer Tools: Template panel. Most of my templates are rather long and I have to scroll horizontally in the edit pane because it is truncated by the result pane.

Since my templates are frequently wider than they are long, it would be helpful (hopefully for others as well!) if the result pane was located beneath the edit pane so I didn't have to horizontally scroll the edit pane.

Is this just me?

@spacegaier because I saw you had done some work in the Developer Tools panel.

Thanks!

So I inspected the page in my browser and it looks like just changing
<div class="content layout horizontal">
to
<div class="content layout vertical">
effects the change I'm talking about.

I have no idea how to do this in the .ts

[spacegaier]

I have never seen this issue reported so far by others. Are you aware of any other users voicing this issue, e.g. on the forums?

EDIT: Just saw that there is already a proposed PR and a longer discussion in there: #16921

[Petro31]

I'd only want this if the 2 can be scrolled independently, treated as 2 separate tabs. Come to think about it, it should be like that already IMO, like 2 separate windows in VSCode.

[IWR69]

I have the same problem on my widescreen monitor, 3440 x 1440, although my browser fills just the right half of the screen (width). I don't like that I have to keep scrolling the template editor left and right to see and edit my code. Yes I could change my code but I like the way my code looks as it is - it works for me. Reducing the browser width, which I don't wish to do just for HA, does result in the result window appearing below the template editor but now the editor window is even thinner so suffers with more scrolling - plus I find that harder to code and see the results.

Therefore would it be possible to either make the template editor window width adjustable or for it to be about 2/3rds of the browser width with the result window reducing to 1/3rd?

Currently they both occupy 50/50. Here is an example:

[backcountrymountains]

I still like over-under vs side-by-side. I made a tampermonkey/greasemonkey/firemonkey script to slog through all the shadowroots and change the layout of the page. It uses setTimeout(). Don't judge me.

// ==UserScript==
// @name         Change Developer Tools Template editor layout
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change Developer Tools Template editor layout
// @author       You
// @match        *://*/developer-tools/template
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

  setTimeout(function(){
    let editPane = document.querySelector('home-assistant')
      .shadowRoot.querySelector('home-assistant-main')
      .shadowRoot.querySelector('ha-drawer')
      .querySelector('partial-panel-resolver')
      .querySelector('ha-panel-developer-tools')
      .shadowRoot.querySelector('developer-tools-router')
      .querySelector('developer-tools-template')
      .shadowRoot.querySelector('div[class="content  layout horizontal "]');

    editPane.className = "content layout vertical";

    let editPaneEditor = editPane.querySelector('ha-card[class="edit-pane type-undefined"]')
    		.querySelector('div.card-content')
    		.querySelector('ha-code-editor')
    		.shadowRoot.querySelector('div[class^="cm-editor"]')
    		;
    let renderPaneString = editPane.querySelector('ha-card[class="render-pane type-undefined"]')
    		.querySelector('div.card-content')
    		.querySelector('pre[class="rendered  string "]');

    // Add scrollbar to edit pane editor, set height to 600 pixels
    editPaneEditor.style.overflowY = 'scroll';
    editPaneEditor.style.height = '600px';

    // Add scrollbar to render pane string, set height to 200 pixels
    renderPaneString.style.overflowY = 'scroll';
    renderPaneString.style.height = '200px';
    
    //Wait this many milliseconds before trying to run the script
    }, 800);
})
();

This works on my install of HA 2024.11.1 in Firefox, using Firemonkey.

[backcountrymountains]

I made a side-by-side one. For some reason, the Firemonkey script won't rearrange the page unless you are on the developer-tools tab and refresh the page. Dunno.

// ==UserScript==
// @name         Change Developer Tools Template editor layout to wide SBS
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change Developer Tools Template editor layout to wide SBS
// @author       You
// @match        *://*/developer-tools/template
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

  setTimeout(function(){
    let editPane = document.querySelector('home-assistant')
      .shadowRoot.querySelector('home-assistant-main')
      .shadowRoot.querySelector('ha-drawer')
      .querySelector('partial-panel-resolver')
      .querySelector('ha-panel-developer-tools')
      .shadowRoot.querySelector('developer-tools-router')
      .querySelector('developer-tools-template')
      .shadowRoot.querySelector('div[class="content  layout horizontal "]');

    
    let editPaneCard = editPane.querySelector('ha-card[class="edit-pane type-undefined"]');
    
    let editPaneEditor = editPaneCard.querySelector('div.card-content')
    		.querySelector('ha-code-editor')
    		.shadowRoot.querySelector('div[class^="cm-editor"]')
    		;
		
    let renderPaneString = editPane.querySelector('ha-card[class="render-pane type-undefined"]')
    		.querySelector('div.card-content')
    		.querySelector('pre[class="rendered  string "]');

    // Change width of edit pane card and embiggen max-width
    editPaneCard.style.width = '80%';
    editPaneCard.style.maxWidth = '100%';

    // Add scrollbar to edit pane editor, set height to something reasonable
    editPaneEditor.style.overflowY = 'scroll';
    editPaneEditor.style.height = window.innerHeight - (window.innerHeight*0.3) + 'px';

    // Add scrollbar to render pane string, set height to something reasonable
    renderPaneString.style.overflowY = 'scroll';
    renderPaneString.style.height = window.innerHeight - (window.innerHeight*0.3) + 'px';

    //Wait this many milliseconds before trying to run the script
    }, 2000);
})
();