AAE-34885 Form with tabs has incomplete frame in preview (#10880)

* AAE-34885 Form tabs preview frame size and width fix

* AAE-34885 fixing form preview in modeling app

* AAE-34485 workspace-app form scroll fix

* AAE-34485 fixing margin issues on the modeling app form preview

* fixing width issues on preview

---------

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>

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

@@ -4,9 +4,9 @@
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
             <mat-tab-group>
                 <mat-tab   *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
-                    <div class="adf-form-tab-content">
+                    <ng-container class="adf-form-tab-content">
                         <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
-                    </div>
+                    </ng-container>
                 </mat-tab>
             </mat-tab-group>
         </div>

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

@@ -15,11 +15,9 @@
 
 .alfresco-tabs-widget {
     width: 100%;
-    position: absolute;
 
     .adf-form-tab-group {
         width: 100%;
-        z-index: 9999;
     }
 
     #{ms.$mat-tab-body} {
@@ -30,16 +28,17 @@
         z-index: 10;
         margin: 0;
         background-color: white;
-        position: sticky;
-        /* stylelint-disable-next-line value-no-vendor-prefix */
-        position: -webkit-sticky; /* macOS/iOS Safari */
+        position: absolute;
+        width: 96%;
         /* stylelint-disable-next-line declaration-no-important */
         margin-left: 0 !important;
+        /* stylelint-disable-next-line declaration-no-important */
+        margin-right: 10px !important;
         top: 0;
     }
 
     #{ms.$mat-tab-body-wrapper} {
-        padding-top: 16px;
+        padding-top: 5%;
     }
 }