Button text overflows

[3VAbdAVE]

Great theme, appreciate the instructions for custom colors. I've a problem with overflowing text on buttons. I tried adding a "word-wrap: break-word;" property to the classes, but it didn't have an effect. Also tried it in a card_mod style, but it appears to be beyond my CSS knowledge.

[th3jesta]

Yikes, that's a tight layout. So, the way the CSS is constructed, word-wrapping is going to be a major headache and probably won't produce useable results. I have two recommendations, easiest first:

1. Change the button text to something that will fit, such as BAR VIRTUAL instead of BAR VIRTUAL BUTTON or maybe just BAR.
2. Don't use a horizontal stack, and instead just have one column of buttons.
3. Reduce the font size instead of wrapping it. Unless it's just not feasible for you, I think changing the button text is the best route and what I have done personally. I think abbreviations would even be in keeping with LCARS style, like 'Ops' instead of 'Operations.'

[3VAbdAVE]

Hi, thanks for the support. I did end up just shortening the text, works ok. My goal is to have this as a console on an old phone in landscape mode with as little scrolling as possible, so tightening up spacing and reducing text size would be preferable. I'm pretty close.

Don't suppose there's a way to reduce the vertical height of the buttons?

[th3jesta]

I was able to make the buttons shorter by adding the max-height: 40px; property to the ha-card.button-bullet and reducing the min-height property to <= max-height.

[3VAbdAVE]

Thanks, I think that got me just about where I need to be, and I can just clean up the colors and layout and it'll do exactly what I want.

[th3jesta]

Wow! That looks great! Feel free to show that off in the Discord, if you feel so inclined. Also, I need to check into that weird radius on the bottom left of the Spotify card. Have you done anything with that, or is it my code?

[3VAbdAVE]

That's the standard Media Player card (type: media-control), no changes to it.