The label font size is 1rem so no surprise it doesn't change as the group shrinks, but if I change it to eg 1vw it still doesn't change with the group width.
Is there another CSS font size setting which does change with the group width?
The margins of this label seem to be fixed width. --v-field-padding-start and -end are 16px:
Of course, good point.
So the font size is probably best specified in rem units.
I have been playing with the hints in your link (thanks).
It turns out that the margins and max-width are more significant than font-size for fitting the label into a 1x1 widget, so maybe the cq.. units are best for these. I arbitrarily picked cqw.
On my PC screen at full resolution (1920 x 1080), a 1x1 widget is roughly 86 pixels wide when the sidebar is not shown, roughly 65 when it is.
With default settings, the label "Percent" gets truncated.
/* Use custom class 'shrink' to give a container I can set as inline-size */
.shrink {
container-type: inline-size;
container-name: oneunit; /* Name is optional */
background-color: honeydew;
}
/* Change default settings to use cqw units such that "Percent" is not truncated */
.shrink .v-field-label {
margin-inline-start: 10cqw;
margin-inline-end: 10cqw;
max-width: 80cqw;
}
/* Different styling if the container is < 85px wide */
@container oneunit (max-width: 85px) { /* note container name */
.shrink .v-field{
background-color: lightgreen; /* just to make it stand out */
}
.shrink .v-field-label {
margin-inline-start: 5cqw; /* Smaller margins */
margin-inline-end: 5cqw;
max-width: 90cqw; /* Proportionally larger max-width */ }
}
And the result with/without the sidebar (Only the green text-input widget has class 'shrink')
While this does give more room for labels in all widgets, particularly smaller ones, it does not eliminate truncation, it just happens to work on my screen for this particular label.
An undesirable effect is that the left hand of the label no longer aligns with other widgets.
I could get round this by adjusting the start/end margin sizes.
Or maybe all label positions should be styled using cqw? I'm sure there are very good reasons why it's currently done with px.
Alternatively I can retain the default margins for > 85px but slightly reduce the font-size.
Is D2 using container queries? Watch out for browser compatibility, especially if using older mobiles. Full compatibility seems to have arrived in early 2023.
Which demonstrates quite nicely that 100% of surveys produce 96.453% of incorrect results!
I generally try to target early 2019 browsers for generic support as this still includes some slightly older tablets and phones which people may be using, especially for IoT and Home Automation.
So my comment was simply to remind folk to remember that not everyone can be on a current browser. Know your users.
New features should be used as much as possible I'd say...
BUT
the one must understand what happens if there's no support and include them only so that it does not affect the outcome in a way that makes it unusable or unreadable