I’m using a custom button card and running into issues with word wrap not working on tablet display. Works fine on desktop:
but on tablet I get the ‘…’ instead of the wrap I’m expecting:
Here’s the code:
type: custom:button-card
entity: input_boolean.lr_tablet_mic
show_state: false
show_icon: false
show_name: false
triggers_update: all
tap_action: none
hold_action: none
double_tap_action: none
aspect_ratio: 2/1
styles:
grid:
- grid-template-areas: |
"announcement announcement"
"image message"
"image message"
"assist assist"
- grid-template-rows: min-content 4fr min-content
- grid-template-columns: 1fr 2fr
- row-gap: .5rem
card:
- min-height: 100vh
- background-color: '#059bf1'
- background-size: cover
- border-radius: 0px
- overflow: hidden
- color: white
- font-family: '"Roboto", sans-serif'
- font-weight: 300
- padding: 2%
- background: center / cover no-repeat url("/local/alexaclone/announcebird.png")
- background-size: cover
custom_fields:
announcement:
- justify-self: start
- align-self: start
- z-index: 2
- font-size: 200%
- width: max-content
image:
- align-self: center
- justify-self: center
- object-fit: contain
- width: 75%
message:
- padding: 10px
- font-size: 2vw
- text-align: start
- text-wrap: wrap
- justify-content: start
- align-self: center
- width: 100%
assist:
- justify-self: end
- height: 10px
- position: absolute
- width: 100%
- z-index: 2
- top: 95%
state:
- value: 'on'
styles:
custom_fields:
assist:
- animation: pulse 2s infinite
- height: 10px
extra_styles: |
@keyframes pulse {
0%, 100% {
background-color: #f56a3f;
}
50% {
background-color: #9e42b0;
}
}
custom_fields:
assist: .
announcement: |
[[[
return `<b style="font-weight:400;">Wikipedia Search</b>`
]]]
image:
card:
type: picture
image: '[[[ return states["sensor.assistsat_viewlr"].attributes.image; ]]]'
message: |
[[[
var message = states["sensor.assistsat_viewlr"].attributes.message;
return `${message}`
]]]
Does anyone have any idea what is going on or an alternative to get this working?
Thanks