dashy [BUG] Text overflow in long titles for items in section

Environment

Self-Hosted (Docker)

System

Docker 20.10.17; Docker Compose v2.9.0

Version

2.1.1

Describe the problem

When adding/editing items to a section, if the item's title text is too long, it will overflow the text onto the adjacent item, which is kind of frustrating to the eye.

Personally, I rather see something with ellipsis

Or any other alternative that refrains from text overflowing.

Additional info

Occurs with every theme, with some deviations, either overflowing or cutting off text

Please tick the boxes

[X] You have explained the issue clearly, and included all relevant info
[X] You are using a supported version of Dashy
[X] You've checked that this issue hasn't already been raised
[X] You've checked the docs and troubleshooting guide
[X] You agree to the code of conduct

Aug 18 '22 23:08 ToshY

Hi, If I can add my stone on this issue here are some example of myself getting the issue on some themes: In VaporWave theme Then when I open in section mode we can see the text is OOB.

And in Minimal-Dark theme

The title of the item is: Internal Processes

My Docker version: 20.10.17 (Build 100c701) My Dashy version: 2.1.1 (up to date when posting this)

Sep 01 '22 15:09 Lord-ZuzurNC

This issue has gone 6 weeks without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.

Oct 02 '22 01:10 liss-bot

relevant

Oct 02 '22 18:10 ToshY

Heya @ToshY Sorry for the delay This is definitely a UI bug, and I've added it to the backlog to fix. Thanks for raising :)

In the meantime, you should be able to fix this in a number of ways with some CSS; here's a few ideas..

Wrap text onto next line:

.tile-title span.text { white-space: normal; }

Hide overflow text:

.tile-title { overflow: hidden; }

Shrink text:

.tile-title span.text { font-size: 0.8rem; }

To apply custom CSS, either add it through the UI (Config Menu --> Custom CSS), or in your config file (appConfig.customCSS). Theming Docs are slightly out-dated, but do explain this further.