Adjusting device page ui

[worldly stump]

When viewing device pages on desktop, the columns are really small. Is there a way to make this more consistent with the rest of the Home Assistant ui? I've adjust zoom and doesn't help.

[lone veldt]

@languid mountain Do you know if this is something that might get some polishing up in the future? Seems like a legit request especially when working on widescreen monitors. On my screen, I could potentially fit six columns.

[languid mountain]

No I don't know, I don't really have any insight to what anyone else is thinking or working on.

[turbid osprey]

Card-mod v4.0.0-beta.6 supports config pages. A starter card-mod theme config for ha-config-device-page is below. This sets the outer container to have width 100% (rather than 1000px) and sets column width from 33% to 50% so you get 2 columns full width, with the 3rd wrapping below (container is flex wrap). Setting column width to 100% would have each column take up the whole container - you could do this and then set a max-width on container.

  card-mod-config-yaml: |
    ha-config-device-page $: |
      .container {
        max-width: 100%;
      }
      .column {
        width: 50%;
      }

[sacred aspen]

it is very sweet indeed, those pages need updating, most of all, they could be more consistent in their use of elements.... one finds out when one is able to modify those pages , like now with card_mod 4.0.0 beta 😉

my favorite for now is

  card-mod-developer-tools-yaml: |
    developer-yaml-config $ ha-card:nth-of-type(2) $: |
      :host slot {
        display: block;
        padding-top: 5px;
        height: 600px;
        overflow: scroll;
        color: var(--warning-color);
        font-weight: 600;
      }

setting a warning color on the warning text, and decreasing that card height into a scroller

[lone veldt]

Yet another reason I need to stop procrastinating with my breaking-changes updates...

[sacred aspen]

😉 running all of those ....

if you need help, let me know... you wont probably, as they were developed by the best custom dev'ers. and tested rather severely. Kiosk mode required a bit of editing going from entity mode to template mode (if you so desire). Button-card has such huge leaps and still most of it it obvious. you ll soon notice I promise 😉

[lone veldt]

I went ahead a just bit the bullet and updated them all. Kiosk Mode was the most troublesome with the new entity usage format. Honestly, I don't even really use the entities any more so I probably could have just gotten rid of them. (I used them years ago for testing and design purposes and to prevent me from locking down the dashboard too much.) For the custom:button-card, I had to update the ripple effects variable. I'm curious how the removal of triggers_update is going to work. IIRC, I would use that to "watch" a different entity that was not being used in the card in order to get the card to update properly. I think it was also needed for some of my custom_fields to work properly. I'll have to look a bit to see if anything actually broke.

I had also noticed some of my card_mod stopped working. Particularly the one with the battery color indicators that you had help me with. Updating card_mod made it start working again.