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

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
5 Likes