@uncinq/css-components 1.22.1 → 1.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/form.css +1 -1
- package/docs/forms/form.md +3 -1
- package/package.json +1 -1
package/css/components/form.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
.form {
|
|
4
4
|
display: grid;
|
|
5
5
|
gap: var(--gap);
|
|
6
|
-
grid-template-columns: repeat(auto-fill, minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr));
|
|
6
|
+
grid-template-columns: repeat(auto-fill, minmax(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 1fr));
|
|
7
7
|
|
|
8
8
|
.help {
|
|
9
9
|
color: var(--help-color-text);
|
package/docs/forms/form.md
CHANGED
|
@@ -36,12 +36,14 @@ Each field is a plain `div`. There is no `.form-group` or `.field` class: the gr
|
|
|
36
36
|
```css
|
|
37
37
|
grid-template-columns: repeat(
|
|
38
38
|
auto-fill,
|
|
39
|
-
minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr)
|
|
39
|
+
minmax(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 1fr)
|
|
40
40
|
);
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
The `max()` is doing two jobs at once. It sets a **floor** of `25ch`, below which a field is too narrow to use, and it sets each track to at least half the width minus half the gap, which **caps** the result at two columns however wide the container gets.
|
|
44
44
|
|
|
45
|
+
The outer `min(…, 100%)` keeps that floor from ever exceeding the form itself. `ch` is the width of the font's `0`, so with a wide typeface `25ch` can be wider than a phone screen (Termina's `0` is 0.94em, making `25ch` 376px at 16px), and without the clamp the single column would overflow its container and widen the page.
|
|
46
|
+
|
|
45
47
|
A three-column form is almost never what you want, because it breaks the vertical reading order of a sequence of fields: the eye has to move right twice before dropping a line, and nothing in the layout says which order the fields belong in.
|
|
46
48
|
|
|
47
49
|
Change the floor with `--form-col-min-width`. Raising it past 50% forces a single column, which is a reasonable way to write a narrow form without a variant class.
|