I am stuck using a small screen now and finding the template editor really annoying that 25% of the very valuable screen real estate is taken up by this header:
I have tried modifying it via google chrome inspect but so far have not cracked it… anyone know how to get rid of this? or some other way to have the text editor in one screen and ouput/result in another (to even help with not being able to change the split from 50/50)?
Deleting it won’t increase the height of the template editor. It will just shift the template editor up.
I wonder what HA version do you use? A few versions ago left and right panels became 50/50.
As for hiding the upper part - it is possible by an external js. You will need to hide that part and redefine some max-height props. Suggest to check a source code for this page.
It’s here
and you can add display: none in the inspector to temporarily test.
It will look just like petro described
Because max-heights are calculated dependently on a height of an element which was hidden.
Yes sir, so adjusting the line count within the template editor was my thought if you are going to-
Too much effort in my opinion…
If OP wants to get a look they want - could be a sufficient (and only) way).
I do like it removed))
Then wait for me to return intact, will try to post a js code.
Appreciate it…Stay safe!!
versions:
yeah, when i removed it via inspect, the editing pane was still small 
customElements.whenDefined('developer-tools-template').then(() => {
const TemplatePanel = customElements.get('developer-tools-template');
const { html, css } = TemplatePanel.prototype;
const newStyle = css`
.content.horizontal {
--code-mirror-max-height: calc(
100vh - var(--header-height) -
max(16px, env(safe-area-inset-top)) -
max(16px, env(safe-area-inset-bottom)) -
(var(--ha-card-border-width, 1px) * 2) - 179px
);
}
.content:nth-of-type(1) {
display: none;
}
`;
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});
});
thank you!!!
in chrome I put it into tampermonkey, maybe there is a simpler way, but something I had used before.
thanks again!!
I keep js files in www/external-js folder and import them with extra_module (or how it is called, away from PC again).
