fix(css): tup-308, small form style issues

- limit which help text gets margin
- remove ineffectual, unnecessary margin removal
- bigger gap between single checkbox and input
- align single checkbox and input
- add gap between multiple checkbox and input
- align multiple checkbox and input
- remove label margin on last of multiple checkboxes/radios
- simpler, less specific checkbox label selector
- remove undesired label margin*

* This style was ineffectual—good—in 3.6, but "fixed"—bad—when ported.

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css

@@ -23,10 +23,9 @@ Styleguide Components.DjangoCMS.Blog.App
 .help-text {
   font-size: var(--global-font-size--small);
   font-style: italic;
-  margin-top: 0.5rem; /* mimic Bootstrap _reboot.css label { margin-bottom } */
 }
-p.help-text:last-child {
-  margin-bottom: 0;
+:not(ul) + .help-text {
+  margin-top: 0.3em; /* mimic Bootstrap _reboot.css label { margin-bottom } */
 }
 
 
@@ -49,8 +48,8 @@ p.help-text:last-child {
 .field-wrapper.checkboxinput {
   display: inline-grid;
 
-  column-gap: 0.25em;
-  align-items: baseline;
+  column-gap: 0.5em;
+  align-items: center;
   grid-template-columns: min-content auto; /* shrink input, let label extend */
   grid-template-areas:
     'error _____'
@@ -65,6 +64,17 @@ p.help-text:last-child {
   margin-bottom: 0; /* overwrite forms.css label */
 }
 
+ul.radioselect label,
+ul.checkboxselectmultiple label {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+}
+ul.radioselect li:last-child label,
+ul.checkboxselectmultiple li:last-child label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
 .asterisk {
   margin-left: 0.5em;
   color: var(--global-color-danger--dark);

taccsite_cms/static/site_cms/css/src/_imports/elements/form.css

@@ -20,14 +20,13 @@ form {
 
 label {
   font-size: var(--global-font-size--small);
+
+  line-height: normal;
+  margin-bottom: 0.75em;
 }
-label:not(input[type="checkbox"] + label) {
+:not(input[type="checkbox"]) + label {
   display: block;
 }
-label:not(:first-child) {
-  margin-top: 2rem; /* mimic <p> `margin-bottom` */
-  /* margin-bottom: 0.5rem; *//* mimic Bootstrap _reboot.css */
-}
 fieldset:not(:last-child) {
   margin-bottom: 3.5rem;
 }