[BasicUI] Shrink labels before values (#3143)

Resolve #3094

Here's an animated gif:

![label-value-width](https://github.com/user-attachments/assets/fc4a60db-dd00-4c8a-9c4d-94bebb1f0ac0)

---------

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
pull/3183/head
jimtng 2025-05-04 17:51:05 +10:00 committed by GitHub
parent efe3fefd4f
commit b67616fd79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 0 deletions

View File

@ -232,6 +232,11 @@
font-size: 18px;
}
}
&__label:has(+ .mdl-form__text) {
// this applies only to labels for sitemap text elements
// Set flex-basis to 0 to prioritize __text over __label (see __text below)
@include flex-2011(2 0 0);
}
&__label-multiline {
min-width: 3em;
}
@ -507,7 +512,10 @@
font-size: 18px;
}
overflow: hidden;
// Make the label shrink first before the text (see __label above)
// See https://stackoverflow.com/a/67858285/15409057
flex-shrink: 2;
flex-grow: 0;
text-overflow: ellipsis;
}
&__webview,