fix: form patterns bugs found via tup UI

src/lib/_imports/components/c-form.css

@@ -27,7 +27,7 @@
 /* To prevent help text font-style from affecting any tags */
 /* FAQ: Help text can contain inline elements like <samp> */
 /* FAQ: Help text can be (ab)used to add headings between form fields */
-.c-form__help > :not(details, a, samp) {
+.c-form__help > :not(details, a, samp, small) {
   font-style: initial;
 }
 
@@ -116,22 +116,29 @@
 
 /* Errors */
 
-.c-form__field ul.c-form__errors {
-  margin-top: 1rem; /* mimic ul margin-bottom */
-  margin-bottom: 0; /* overwrite ul margin-bottom */
+.c-form > .c-form__error,
+.c-form > .c-form__errors {
+  margin-block: 20px;
+}
+.c-form__field .c-form__error,
+.c-form__field .c-form__errors {
+  margin-top: 20px;
+  margin-bottom: 0; /* overrides html-elements.css ul margin-bottom */
 }
 
 ul.c-form__errors {
   list-style: none;
   padding-inline: 0;
 }
 
+.c-form > .c-form__error,
 .c-form > .c-form__errors {
   @extend .c-message;
   @extend .c-message--type-error;
   @extend .c-message--scope-section;
   @extend .c-message--scope-section.c-message--type-error;
 }
+.c-form__field .c-form__error,
 .c-form__field .c-form__errors li {
   @extend .c-message;
   @extend .c-message--type-error;
@@ -174,3 +181,11 @@ ul.c-form__errors {
 .c-form__button[type="reset"] {
   @extend .c-button--tertiary;
 }
+
+/* TODO: Test whether this fixes size difference between demo and cms */
+/*
+::file-selector-button {
+  @extend .c-button;
+  @extend .c-button--secondary;
+}
+*/

src/lib/_imports/components/django-cms-forms.css

@@ -29,7 +29,7 @@
 /* To prevent help text font-style from affecting any tags */
 /* FAQ: Help text can contain inline elements like <samp> */
 /* FAQ: Help text can be (ab)used to add headings between form fields */
-.help-text > :not(details, a, samp) {
+.help-text > :not(details, a, samp, small) {
   font-style: initial;
 }
 
@@ -115,21 +115,19 @@ ul.checkboxselectmultiple li:last-child label {
 
 /* Errors */
 
-.field-errors ul {
-  margin-top: 1rem; /* mimic ul margin-bottom */
-}
-.form-errors ul,
-.field-errors ul {
-  margin-bottom: 0; /* overwrite ul margin-bottom */
-}
 .form-errors {
-  margin-bottom: 1rem; /* mimic ul margin-bottom */
+  margin-block: 20px;
+}
+.field-errors {
+  margin-top: 20px;
+  margin-bottom: 0; /* overrides html-elements.css ul margin-bottom */
 }
 
 .form-errors ul,
 .field-errors ul {
   list-style: none;
   padding-inline: 0;
+  margin-block: 0;
 }
 
 .form-errors {
@@ -185,3 +183,11 @@ ul.checkboxselectmultiple {
 .form-button[type="reset"] {
   @extend .c-button--tertiary;
 }
+
+/* TODO: Test whether this fixes size difference between demo and cms */
+/*
+::file-selector-button {
+  @extend .c-button;
+  @extend .c-button--secondary;
+}
+*/