Apply word-break: break-all to entities' names and values.

The entity name and value in the component header may be arbitrarily
long and rendered on small screens.

We therefore need to ensure that the text won't overflow the screen
width.
This commit is contained in:
Fabio Manganiello 2023-04-30 01:17:54 +02:00
parent 3d7755159f
commit 0b853e0a54
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -221,6 +221,7 @@ export default {
.head { .head {
.name { .name {
display: inline-flex; display: inline-flex;
word-break: break-all;
&:hover { &:hover {
color: $hover-fg; color: $hover-fg;
@ -231,6 +232,10 @@ export default {
margin-left: 0.5em; margin-left: 0.5em;
} }
.value {
word-break: break-all;
}
.icon:hover { .icon:hover {
color: $hover-fg; color: $hover-fg;
} }