Reorder Configuration -> General

Under “Configuration -> General” please move the “Configuration validation”, “Configuration reloading”, and “Server management” to the top of page.

“Name”, “Timezone”, “Elevation” and “Unit System” are currently at the top. Since these are either set once and don’t change, or not used and set in configuration.yaml, it doesn’t make sense having them at the top so have to scroll down to get to the frequently used sections.

Please consider, Thanks.

I just came here to request this exact thing. The things at the top are ‘set and forget’ for the vast majority of users. They might as well be at the bottom of the page.

this has been discussed several times elsewhere. Supposedly the devs were having a discussion on how to handle it. I haven’t heard what the final determination was but it was is still like that in the newest release so maybe that’s the answer?

hopefully this feature request will get their attention and it will be addressed.

I agree moving them down or having the option to minimize or hide these panels would be great. :slight_smile:

Good one, voted.
Alternatively, put them inside an accordeon menu, so that they only take one “line”.

I hope they see this. Having to scroll down every time gets old fast. In the mean time I made a small script to just move the 2 cards down. Idk why the HTML doesn’t seem to have any IDs or class names for it’s elements, but oh well. I use a Chrome extension called InjectCode to inject it every time the page is open.

if (location.pathname == '/config/core') {
	var header = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-config > ha-config-core").shadowRoot.querySelector("hass-subpage > div > ha-config-section-core").shadowRoot.querySelector("ha-config-section > span:nth-child(1)").innerText;
    var nameCard = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-config > ha-config-core").shadowRoot.querySelector("hass-subpage > div > ha-config-section-core").shadowRoot.querySelector("ha-config-section > ha-config-name-form");
    var mapCard = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-config > ha-config-core").shadowRoot.querySelector("hass-subpage > div > ha-config-section-core").shadowRoot.querySelector("ha-config-section > ha-config-core-form");
    var resetCard = document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-config > ha-config-core").shadowRoot.querySelector("hass-subpage > div > ha-config-section-core").shadowRoot.querySelector("ha-config-section > ha-card:nth-child(8)");

    function insertAfter(el, referenceNode) {
        referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
    }
	
	if (header == 'Configuration and Server Control') {
		insertAfter(mapCard, resetCard);
    	insertAfter(nameCard, resetCard);
    }
    
}

Not a bad workaround, but it may get wiped out by an update.

I ended up using an adblocker to hide the top elements myself.

What also could be be done is hide them entirely when the configuration is set in the configuration.yaml? Perhaps a one-liner explaining this.

I guess most people that have to restart/check config etc use the config files rather than the UI to change things anyway.

this is implemented

1 Like