fix: tup-659 all form fields too short (#267)

* fix: tup-659 all form fields too short 1. Remove field width stretch from CMS and Login. 2. Add field width stretch to all forms. 3. Support form width stretch only if NOT a checkbox. * fix: tup-659 simplify solution No need to avoid stretching fieldw rapper that has a checkbox. A checkbox (and others) are already explicitely told not to stretch. * refactor: revert unrelated changes
TACC · Nov 21, 2023 · 793c441 · 793c441
1 parent e7349b3
commit 793c441
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 22 deletions.
diff --git a/dist/components/c-form--login.css b/dist/components/c-form--login.css
diff --git a/dist/components/c-form.css b/dist/components/c-form.css
diff --git a/dist/components/django-cms-forms.css b/dist/components/django-cms-forms.css
diff --git a/dist/core-styles.base.css b/dist/core-styles.base.css
diff --git a/dist/trumps/s-form--login.css b/dist/trumps/s-form--login.css
diff --git a/dist/trumps/s-form.css b/dist/trumps/s-form.css
diff --git a/src/lib/_imports/components/c-form--login.css b/src/lib/_imports/components/c-form--login.css
@@ -65,12 +65,6 @@
   display: none;
 }
 
-/* To make elements bigger */
-& :--form__field:not(:--form__field--has-checkbox) {
-  /* To stretch input field width */
-  display: flex;
-  flex-direction: column;
-}
 /* To always use larger field inputs (not just on coarse pointer devices) */
 & input {
   padding: 12px 12px; /* mimic Core Styles forms.css @media (pointer: coarse) */

diff --git a/src/lib/_imports/components/c-form.css b/src/lib/_imports/components/c-form.css
@@ -38,6 +38,9 @@
 
 :--form__field {
   margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
+
+  display: flex;
+  flex-direction: column;
 }
 
 :--form__field--has-checkbox {

diff --git a/src/lib/_imports/components/django-cms-forms.css b/src/lib/_imports/components/django-cms-forms.css
@@ -8,13 +8,6 @@
 /* SEE ../components/c-form.css */
 /* SEE: ../tools/selectors.form.css */
 
-@custom-selector :--cms-form__field--no-checkbox
-  .field-wrapper:where(:not(.checkboxinput));
-
-:--cms-form__field--no-checkbox {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-}
-:--cms-form__field--no-checkbox > .field-errors { order: 1; }
-:--cms-form__field--no-checkbox > .help-text    { order: 2; }
+/* To ensure */
+:--cms-form__field > :--cms-form__errors { order: 1; }
+:--cms-form__field > :--cms-form__help { order: 2; }