Who the hell designed the device submenu? Practically every entity has half the name hidden - why cannot it be wider?
#Entities view too narrow
kind oracle
twin hamlet
vernal basin
here is a custom button card that you can put in a stack in card or stack them. Look at the formatting. It will have the name go over the slider. You can use some of this code to get the same functionality in your cards
type: custom:mushroom-light-card
entity: light.office_soffit_leds_2
use_light_color: false
show_brightness_control: true
icon_color: amber
fill_container: false
collapsible_controls: false
show_color_control: false
show_color_temp_control: false
layout: horizontal
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:chandelier
name: Office Chandelier
card_mod:
style: |
ha-card {
color: rgba(215, 215, 215, 1) !important;
position: relative;
border-radius: 12px !important;
box-shadow:
12px 12px 24px rgba(0, 0, 0, 0.5),
-4px -4px 8px rgba(255, 255, 255, 0.1),
inset -4px -4px 8px rgba(0, 0, 0, 0.2),
inset 3px 4px 8px rgba(255, 255, 255, 0.2) !important;
}
mushroom-slider {
position: relative;
z-index: 1; /* Keeps slider in background /
}
mushroom-slider .slider {
z-index: 1 !important; / Ensures slider track stays below text /
}
mushroom-slider .slider-fill {
z-index: 1 !important; / Ensures slider fill stays below text /
}
mushroom-state-info {
position: absolute;
top: 18%;
left: 55px;
transform: none
font-size: 14px !important; / Readable text /
font-weight: bold;
color: rgba(255, 255, 255, 1) !important; / Solid white text /
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); / Improves visibility /
pointer-events: none; / Allows slider interaction /
z-index: 2 !important; / Moves text above slider fill */
}