Feature Request: Boxes on Integrations page too small when there are many devices - please allow expanding

[alexruffell]

Most of the integrations are of the set and forget type, but with ESPHome, I find myself using the integration page a lot to get to the device settings and it has become very frustrating to use given how small the box is. Scrolling with the mouse is very twitchy, and dragging the tiny dot on the right is a non starter. The mobile app expands the box to show the entire list... it would be nice if the same could be implemented for all the integration boxes. Once way could be to have a tiny symbol on the box that once clicked expands the box... or something along those lines.

My EspHome box has 28 devices and growing. The more devices, the more frustrating it is to use.

[Misiu]

I was going to ask for the same improvement.
I suggest one of two:

1. adding the ability to click on the card header and display it as a modal
   Current view:
   
   View after clicking on the header (position fixed and some additional styles):
   
   not sure if we can fix this by adding a conditional CSS class to ha-integration-card or maybe a dedicated dialog (component) must be created.

2. applying grid-row: span 2 if there are more than X elements on the list
   This looks good:
   
   but this doesn't:
   
   so this approach would require some CSS tweaks to div that displays ha-integration-card's

[Misiu]

FYI, you can use the search on the integration page to find the device you need (assuming you know the device name)

[spicedreams]

obviously, use your own local IP address...

[ildar170975]

Same as I wrote in a similar issue:
Using "search" is not always convenient, a user need to know WHAT to search.

[alexruffell]

Thank you for the work arounds... but the goal is to improve the UI. As it is, it is extremely frustrating to use. I have large 4k screens and a jumpy mouse which may make it a bit more frustrating than more common setups on 1080 screens, et the box is just way too small, and the window scrollbar is tiny! Just looks like it was not meant to be used... Usually it is worse on mobile, but in this case it is way better on my phone as the list is expanded by default.

[Misiu]

What do you think about such a layout: https://codepen.io/Misiu/pen/YzJZWeB This is a POC, but when I get approval I can try to implement it. Idea is to set the height of a card based on items count.
Can someone check how this looks on Safari?

[alexruffell]

@Misiu - I pasted what I see below. I guess the important thing is to keep in mind the extremes where someone can have large numbers of devices so expanding solely based on number of devices may cause issues in more extreme cases. The thing I find most annoying of the current design is that it shows 2 or 3 devices and scrolling is harder than it needs to be on a desktop (no touch). If you expand the window to double or even more, then it is a lot easier to scroll up / down without missing your target. Also, the side scroll bar is tiny (and gets smaller the more devices you have making it even worse) and a bit annoying to click on. Some of the annoyance could likely be reduced by tweaking my mouse acceleration, speed, etc. but should I be configuring my mouse to accommodate HA? Also, my screens are both 32" 4K which may make stuff smaller than normal but that is also likely the trend moving forward. Clicking and dragging the list would also be nice mimicking touch screens.

[Misiu]

I've created PR with the proposed change: #16314.
Upvotes are welcome :)

[matthiasdebaat]

See #10375 (comment)