i’ve successfully deployed some minor tweaks using card-mod inside of my theme.yaml file, but i’m having trouble figuring out how to make tweaks to the pop up menu that appears when i click to edit a card – i.e:
i’m trying to make it take up the full width of window so the code editor part doesn’t spill over.
if i add the 2 css attributes below directly to my inspect panel in browser, it works as intended (until i refresh).
but i can’t seem to get it working when i try to add it into my theme file. after reading the post about ‘navigating dom elements’, i thought the below would’ve worked…but no dice.
card-mod-root: |
ha-dialog$: |
.mdc-dialog .mdc-dialog__surface {
width: 90% !important;
}
.mdc-dialog .mdc-dialog__content {
width: 100% !important;
}
i’ve also tried adding the above code under ‘card-mod-more-info-yaml’ in my theme file as fell. doesn’t do anything either.
any ideas what i’m doing wrong?
and in case the additional context is needed, here’s the entire string i get when i select “copy element” (for the .mdc-dialog .mdc-dialog__content part) from the inspect panel in my browser:
<div class="mdc-dialog__surface"> <!--?lit$722544887$--><slot name="heading"> <!--?lit$722544887$--> <h2 id="title" class="mdc-dialog__title"><!--?lit$722544887$-->Vertical stack Card configuration</h2> </slot> <div id="content" class="mdc-dialog__content"> <slot id="contentSlot"></slot> </div> <footer id="actions" class=" mdc-dialog__actions "> <span> <slot name="secondaryAction"></slot> </span> <span> <slot name="primaryAction"></slot> </span> </footer> </div>
thank you!