Clean up spacing in input forms

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -1,5 +1,5 @@
-<div [class.mb-3]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-3')"
-  [class.d-none]="model.hidden"
+<div [class.mb-2]="hasLabel || model.type === 'DATE' || (model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-2')"
+     [class.d-none]="model.hidden"
   [formGroup]="group"
   [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   @if (!isCheckbox && hasLabel) {
@@ -24,8 +24,7 @@
              class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
       }
       <!-- In case of repeatable fields show empty space for all elements except the first -->
-      @if (context?.index !== null
-        && (!showErrorMessages || errorMessages.length === 0)) {
+      @if (context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)) {
         <div class="clearfix w-100 mb-2"></div>
       }
 
@@ -99,7 +98,9 @@
       <small
       class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
     }
-    <div class="clearfix w-100 mb-2"></div>
+    @if (context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)) {
+      <div class="clearfix w-100 mb-2"></div>
+    }
   }
   <ng-content></ng-content>
 </div>

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss

@@ -15,7 +15,6 @@
   appearance: none;
 }
 
-
 :host ::ng-deep .btn-group-toggle > .btn input[type="radio"] {
   position: absolute;
   clip: rect(0,0,0,0);
@@ -33,3 +32,13 @@
 :host ::ng-deep .custom-control-input.is-invalid ~ .custom-control-label {
   color: var(--bs-form-invalid-color);
 }
+
+.invalid-feedback {
+  margin-top: 0;
+}
+
+.col-form-label {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-bottom: 0.5rem;
+}

src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex">
-  <span class="me-auto text-contents">
+  <span class="me-auto text-contents align-self-center">
     @if ((metadataRepresentation$ | async) === undefined) {
       <ds-loading [showMessage]="false"></ds-loading>
     }

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss

@@ -4,6 +4,7 @@
 
 legend {
   font-size: initial;
+  margin-bottom: 0;
 
   /* Changed from Bootstrap 5's legend to ensure that the date issues label is on a different line as it's input */
   float: none;