How to make cards wider in new device discovery area?

Configuration Frontend
1

I’d like cards on new device discovery page to be wider by default. For example lets say I go to Settings->Devices & Services → MQTT → devices → device, the cards showing autodiscovered entities are very narrow in the middle of the screen (so certain entity names are not visible - screenshot attached). Is there some way to modify this behavour?

I need this for newly autodiscovered devices so I can’t use lovelace and set up a card with its properties like one would for a permanent device.

Is there some theming I can use? Or is there some relatively simple code modification or setting?

image
image3813×1949 410 KB

2

Found another thread about this issue. Looks like there’s already a Feature Request to change this so please make sure you upvote it.

The old thread has a temporary workaround removing the max-width property on the div.container which should see the cards resize to full width. If you paste the code below into your browser dev console (F12) on the page it should do the same. Currently trying to figure out how to inject that code into HA 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';
3

Workaround here