FR: open as more-info

[Mariusthvdb]

my FR is to have UIX allow opening a card directly on its more-info.

given we have sparks and forges, I would hope UIX could do a show-as-more-info, in addition to the card-as-row like in the cross-context mods

this would be particularly useful for a weather-forecast card, and also the thermostat related cards, which have essential info in the more-info Id love to see when opening the view directly. Lights, covers, etc.

a no longer maintained custom: more-info-card by Thomas Loven was used in the old days, but with current Frontend developing rapidly, a modern approach would be very welcome.

my hopes are:

• directly show the more-info
• option to Not show the more-info header, so the looks are of a true card
• if at all possible, have an option to show the 'details' I mentioned above on that first opening of the 'more-info' ( I have a custom plugin that does that and it makes for a very nice visual experience, all info available on first glance, and details under 1 click)

as you might be aware, those have been moved in a recent PR out of the more-info to a 2 layer deep nested position, which is what I hope to 'undo' with this request

for the human readers and upvotes some visuals

regular weather-forecast card without forecast

the same card opening on more-info

and now with custom details dropdown (and sliced off header, which is what I envision)

[dcapslock]

OK. Starting some thoughts on this while you seek upvotes.

First part solves how to add what is a card to UIX without adding a specific card. A blank card is introduced so sparks can be added to a blank card. This way you could actually have any spark standalone: tile-icon, state-badge, button etc.: and now more-info spark.

UIX Forge Blank Card

FIrst up will be a UIX Forge Blank Card which will be used on UIX Forge if not element or element.type provided. If no element.title provided then will size to a row height with a placeholder message (uses .content:only-child:empty::before CSS seletor so that message content/style can be styled if required).

type: custom:uix-forge
forge:
  mold: card
#element: #element config not required when mold is card(_as_<x>). type: custom:uix-forge-blank-card by default
#  type: custom:uix-forge-blank-card

Once you add a spark or title the placeholder does not show (CSS selector no longer applied). Here also, forge will apply default for: uix-forge-blank-card $ div.content as it knows the forged element is custom:uix-forge-blank-card.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: overlay-icon
      icon: mdi:shimmer
      icon_color: red
      icon_position:
        left: 10px
        top: 8px
  uix:
    style: |
      :host {
        --uix-forge-blank-card-height: 40px;
      }

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: overlay-icon
      icon: mdi:shimmer
      icon_color: red
      icon_position:
        left: calc(100% - 50px)
        top: "-50px"
element:
  title: Forge Blank Card

UIX Forge more-info spark

Like other sparks, it will apply after an element by specifying after: with default applying for: uix-forge-blank-card $ div.content for custom:uix-forge-blank-card. This way you will be able to apply the more-info spark either on an existing card, or on a blank card.

More-info spark will take entity from element or can be specified directly. Should be able to add details. The rest up for grabs for now.

[dcapslock]

UIX Forge Blank Card PR has been created. #436

[dcapslock]

Also blank card_as_row in entities card. So following on you would be able to have more-info spark as a row 😎

type: entities
entities:
  - type: custom:uix-forge
    forge:
      mold: card_as_row
      sparks:
        - type: overlay-icon
          icon: mdi:shimmer
          icon_color: red
          icon_position:
            left: 10px
            top: 8px
      uix:
        style: |
          :host {
            --uix-forge-blank-card-height: 40px;
            --ha-card-border-width: 0;
          }
  - entity: light.bed_light
title: Entities Card

[dcapslock]

@Mariusthvdb for the details mode, I note you have a dropdown. Is there any specific way you would like this to function and be styled? I would borrow from fold-entity-row function with dropdown including timing and button styling.

Also, the more-info details ha element has a yaml mode. How would you expect to toggle that mode when just showing details. The overall more-info card has it as a button in the header.

[dcapslock]

Copilot working on this now that the blank card has been merged which I completed and merged today.

[Mariusthvdb]

another example of the existing more-info-card, now for a light

the same entity is shown at the top, again, this fr spark should not do that.

and, since you also asked about styling: maybe consider making that the same as native more-info, so we can style those in an identical way we already do.

it would be optimal if our existing more-info stylings under uix-more-info would immediately apply to these sparks too, where applicable of course

for the light..:

  uix-more-info-yaml: |
    ha-dialog-header: |
      {# adding this, because Kiosk-mode does not apply to /config dashboards #}
      .breadcrumb {
        {% if is_state('input_boolean.hide_dialog_header_breadcrumb_navigation','on') %}
        display: none !important
        {% endif %};
      }

    ha-more-info-info $ more-info-content $:

      more-info-light $:

        ha-state-control-light-brightness $: |
          ha-control-slider {
            --control-slider-border-radius: var(--border-radius-square) !important;
            --control-slider-thickness: var(--more-info-control-thickness) !important;
          }

        ha-state-control-light-brightness $ ha-control-slider $: |
          .slider .slider-track-bar::after {
            border-radius: var(--border-radius-square) !important;
          }
          .tooltip {
            border-radius: var(--border-radius-square) !important;
            background: var(--card-background-color) !important;
          }

        light-color-rgb-picker $: |
          .native-color-picker {
            color: var(--primary-color) !important;
          }

        light-color-temp-picker $: |
          ha-control-slider {
            --control-slider-border-radius: var(--border-radius-square) !important;
            --control-slider-thickness: var(--more-info-control-thickness) !important;
          }

        light-color-temp-picker $ ha-control-slider $: |
          .slider {
            --handle-size: 4px;
          }
          .slider .slider-track-cursor {
            --cursor-size: 14px !important;
          }
          .slider .slider-track-cursor::after {
            border-radius: var(--border-radius-square) !important;
          }
          .tooltip {
            border-radius: var(--border-radius-square) !important;
            background: var(--card-background-color) !important;
          }

[dcapslock]

The styling may be possible as it will use ha-more-info-info, but it is not in a dialog so may not be able to reuse directly, but still style the same.

[dcapslock]

Styling should be easy, will apply uix directly on container so all ha-more-info-info will work from uix-more-info-yaml. copilot on this now.

PR: #437

[dcapslock]

Note: Yet to test PR but the bulk of the work now done.

[dcapslock]

First cut after copilot's work.

Screen.Recording.2026-07-09.at.6.47.34.pm.mov

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: more-info
      entity: light.bed_light
      details: true
element:
  title: Light More Info

[dcapslock]

Will need to style detail box.

[dcapslock]

uix-more-info(-yaml) applies fine.

  uix-more-info-yaml: |
    ha-more-info-info $ more-info-content $: |
      more-info-light {
        color: red;
      }

[Mariusthvdb]

looking really promising!
cant wait to test this in frontend

btw: on the details option. I could see that develop into a stand alone spark we set to false on all entities.... somehow in UIX-theme? ( I mean even without the more-info spark)

[dcapslock]

Fine tuning theming for generous default padding, and some examples adding to othe card, then will be ready.

btw: on the details option. I could see that develop into a stand alone spark we set to false on all entities.... somehow in UIX-theme? ( I mean even without the more-info spark)

Could easily be more-info with info: false to not show the <ha-more-info-info> section.

[dcapslock]

UIX Forge more-info spark now available in 7.7.0-beta.6

[dcapslock]

https://uix.lf.technology/forge/sparks/more-info/

[Mariusthvdb]

simply stunning!
great feature! thanks a lot

[Mariusthvdb]

works! man this is great indeed.

on the styling of the more-info details: those seem not to pickup the theme settings I use for fold-entity-row (which I figured you said you would 'borrow' for this?)

also, there is an lot of internal margin/padding that imho should be taken out

compare with the details we set with costom-more-info which uses the original HA styling from before it was removed

[dcapslock]

Looks like you are working it out. You should be able to do all styling in theme.

[Mariusthvdb]

yeah, we can do this and have it all:

straight theme:

  uix-more-info-details-outer-padding: 8px
  uix-more-info-details-toggle-color: var(--primary-color)
  uix-more-info-details-toggle-width: 24px
  uix-more-info-details-head-padding: 4px

and uix theme

    .: |

      div.uix-forge-more-info-details-title {
        font-size: var(--ha-font-size-m);
        font-weight: var(--ha-font-weight-medium);
        color: red;
      }
    ha-more-info-info $: |
      div.content {
        padding: 16px;
      }
    ha-more-info-details $: |
      div.content {
        padding: 4px;
      }
      div.card-content {
        padding: 4px;
      }

or modern lingo:

    .: |

      div.uix-forge-more-info-details-title {
        font-size: var(--ha-font-size-m);
        font-weight: var(--ha-font-weight-medium);
      }
    ha-more-info-info $: |
      div.content {
        padding: var(--ha-space-4);
      }
    ha-more-info-details $: |
      div.content {
        padding: var(--ha-space-1);
      }
      div.card-content {
        padding: var(--ha-space-1);
      }

[Mariusthvdb]

Looks like you are working it out. You should be able to do all styling in theme.

haha yes. almost....

why dont I get that box around the dropdown you show in your preview....

found it, its my generic deletion of all border boxes setting those to 0px..

will add it back in the styling then

[Mariusthvdb]

Like fold entity row ;-)

[Mariusthvdb]

Or even better (notice the top and bottom padding in the head is better now) and now in same view as card with fold-entity-row clearly shows they look the same now.

Had to fiddle a bit with paddings as I could not set a shorthand padding in the straight theme.

so now have

  uix-more-info-details-outer-padding: 8px
  uix-more-info-details-toggle-color: var(--primary-color)
  uix-more-info-details-toggle-width: 24px
  uix-more-info-details-head-padding: 0

and uix-theme

    .: |
      div.uix-forge-more-info-details-wrap {
        border-top: 1px solid var(--divider-color);
        padding: 8px 16px;
      }
      div.uix-forge-more-info-details-title {
        font-size: var(--ha-font-size-m);
        font-weight: var(--ha-font-weight-medium);
      }
    ha-more-info-info $: |
      div.content {
        padding: var(--ha-space-4);
      }
    ha-more-info-details $: |
      div.content {
        padding: var(--ha-space-1);
      }
      div.card-content {
        padding: var(--ha-space-1);
      }

which produces the exact same result my fold-entity-rows do.
perfect.

[Mariusthvdb]

Could easily be more-info with info: false to not show the <ha-more-info-info> section.

do you want a separate topic for this?
or leave full Fr here open

[dcapslock]

info: false option Added to 7.7.0-beta.7.

Docs updated with option. https://uix.lf.technology/forge/sparks/more-info/

NOTE: New CSS var --uix-more-info-details-no-info-outer-padding is used in the case of no info section above, providing for top padding. If you have set --uix-more-info-details-outer-padding then you will like wish to also set --uix-more-info-details-no-info-outer-padding to something appropriate for your theme.

[Mariusthvdb]

thanks!

  uix-more-info-details-no-info-outer-padding: 8px 16px

working perfectly here, and all inline again.