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

Feature Requests
1

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!

Screenshot 2024-03-13 at 12.25.27 AM
Screenshot 2024-03-13 at 12.25.27 AM1920×865 51.1 KB

Screenshot 2024-03-13 at 12.25.43 AM
Screenshot 2024-03-13 at 12.25.43 AM1920×1699 115 KB

2

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!

2 Likes
3

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

4

+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';
1 Like
5

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.

6

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

image
image1875×1003 46.8 KB

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
1 Like
7

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

1 Like