Long resource name overflows container
Problem/Opportunity Statement
Broadly speaking:
- Text strings can become longer than the horizontal space that we have allotted for them in the UI.
- This can also happen when displaying a list of items, particularly horizontally (e.g. #838, #839)
- This is most likely to happen for text passed into the app from the outside:
- Strings received from the API
- Strings resulting from user input
- Strings from deployer-defined configuration (e.g. localization)
- This is least likely to happen for strings that are hard-coded in the app.
- When it does happen, the result can make the UI look ugly, or potentially break functionality.
- We could mitigate this.
What would success / a fix look like?
- Develop and implement a holistic strategy for displaying of strings and lists of unbounded length.
- Tactics for strings could include:
- Wrapping to the next line using
Element.paragraph
.- (though this could introduce potential to vertically overflow any containers with a defined or maximum height)
- Truncating the string.
- (This may obscure meaning, if someone has both "my-very-very-very-very-very-very-very-important-volume-old" and "my-very-very-very-very-very-very-very-important-volume-new". One possible mitigation is truncating the middle of the string instead of the end.)
- A toggle tip to show the entire name where it wouldn't otherwise fit.
- (perhaps combine this with truncation)
- Wrapping to the next line using
- Tactics for lists could include:
- Displaying the list vertically in a container that is allowed to grow in height
- In developing this strategy, we should look at industry best practices for dealing with it. Maybe look at Refactoring UI. Maybe ask in the elm-ui community. Maybe ask @lenards.
Edited by Chris Martin