AAE-36582 Fix forms misalignment in form renderer (#11062)

lib/core/src/lib/form/components/form-renderer.component.html

@@ -1,4 +1,4 @@
-<div id="adf-form-renderer" class="{{ formDefinition.className }}"
+<div id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
      [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
     <div *ngIf="formDefinition.hasTabs()">
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -13,6 +13,14 @@
     height: 100%;
 }
 
+.adf-form-renderer {
+    // override Material styles, otherwise fields collapse on some screen widths
+    // related issue: https://hyland.atlassian.net/browse/AAE-36582
+    .mat-mdc-form-field-infix {
+        width: auto;
+    }
+}
+
 .alfresco-tabs-widget {
     width: 100%;
 
@@ -256,6 +264,18 @@
         line-height: 64px;
         margin-right: 15px;
     }
+
+    &-error-messages-container {
+        min-height: 35px;
+    }
+
+    &-error-messages-container-visible {
+        visibility: visible;
+    }
+
+    &-error-messages-container-hidden {
+        visibility: hidden;
+    }
 }
 
 form-field {
@@ -267,7 +287,3 @@ form-field {
         line-height: normal;
     }
 }
-
-.adf-error-messages-container {
-    min-height: 35px;
-}

lib/core/src/lib/form/components/form-section/form-section.component.scss

@@ -5,7 +5,7 @@
         &-single-column {
             display: flex;
             flex-wrap: inherit;
-            align-items: baseline;
+            align-items: center;
             gap: 1%;
 
             @include flex.layout-bp(lt-md) {