Allow columns in Device Info - Settings to be resized or scale to screen width

[Mclovin (John)]

It seems that when in the Settings>Devices & Services> Devices Tab> Pick a drive - the Device Info that are shown in columns do not size well to the page. When there are sliders for example the actual entity name is completely hidden from view making it hard to see what each parameter is.

I feel it should either scale better width wise, or handle the text better by wrapping it down so you can see all of it. Auto handling it would be best, but at least the option to adjust column width in settings here would be a start.

Additionally if the entity name is very long, when you click the entity to open up the popup for that entity the name can also be truncated vs wrapping the name so you can see it completely.

Please find the attached pictures for reference.

I will be linking two other posts in the forums to here to hopefully gain traction on this.

Thanks!

[davidrapan (David Rapaň)]

I second this but I think that solution should be increasing the width of the middle column rather than all three of them uniformly as that would just waste space too.

Cheers!

[IngeJones]

I’d like the columns drag-resizeable please. If that’s not possible then have the entity-ID column wider at least as the full text rarely fits in

[TensE]

+1

Not sure why the decision was made to force the container to a static width of 1000px.

Using the code snippet below should remove the max-width property from the container if pasted into the dev console. Now to figure out how to inject it reliably whenever I visit a device page.

document.querySelector('home-assistant')
    .shadowRoot.querySelector('home-assistant-main')
    .shadowRoot.querySelector('ha-config-device-page')
    .shadowRoot.querySelector('hass-subpage')
        .querySelector('.container').style.maxWidth = 'none';

[mhutch (Mikayla Hutchinson)]

Yep, the current state of this is nigh-unusable for some devices as you have to hover and wait for the tooltip just to see what anything is.

[Ildar_Gabdullin]

Does not look consistent to some other parts of HA - but since you asked…

customElements.whenDefined('ha-config-device-page').then(() => {
  const DevicePage = customElements.get('ha-config-device-page');
  const { html, css } = DevicePage.prototype;
  
  const newStyle = css`
  hass-subpage > .container {
    max-width: none;}`;
  
  const newStyles = [].concat(DevicePage.styles, newStyle);
  Object.defineProperty(DevicePage, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(DevicePage, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});

frontend:
  extra_module_url:
    - /local/js-extenstions/test/device_page_wide.js

[Montreal666]

Works. Fantastic.
Should be implemented in main code.
Thank you.

[poldim]

Thank you!! I just implemented this. This is such a QOL improvement on looking at my entities. It should definitely be in default config.

I tried changing none to 90% or 80%, but see the file isn’t being reloaded. Does it only reload on reboot?

[Ildar_Gabdullin]

It is reloaded after purging a browser cache.

[DrJimP (Jim Pesavento)]

Thank you SOOO much for this!

[poldim]

@Ildar_Gabdullin - I’m trying to do something similar for the configuration column within the page but failing to get the correct syntax. Any chance you can help:

If I select the <label class="mdc-text-field mdc-text-field--no-label mdc-text-field--filled ">, the Styles tab shows

.mdc-text-field {
    width: 100%;
}

If I change this from width to instead set a min-width, it fixes the UI:

But my attempts to put it into device_page_wide.js aren’t successful at fixing the UI:

  const newStyle = css`
  hass-subpage > .container {
    max-width: 90%;}
  hass-subpage > .mdc-text-field {
    min-width: 120px;}
    `;

Any help is appreciated!

[Ildar_Gabdullin]

Sorry, cannot say anything helpful, very far from pc.

[jakeshbazi]

can you list the steps on how to do this please , dealing with a pretty annoying bug here

[TylonHH]

+1 to make the web UI more flexible and not static. Is there already anm issue for that on github? I guess here would nothing happen from the dev side!?

[skyflyer (Miha)]

I could not find an open issue and/or discussion, so I created one here: https://github.com/orgs/home-assistant/discussions/2039

I don’t think that just removing the max-width is the proper solution. I suppose that the “grid” should be adapted so that each column gets at least 500px. When not enough width is available, the columns should “stack”.