From 2fd960bf5c26226a564a6ebd2ef50dc607a3c865 Mon Sep 17 00:00:00 2001
From: Soumyajit Chakraborty <51930458+Isoumyajit@users.noreply.github.com>
Date: Mon, 19 May 2025 15:40:06 +0530
Subject: [PATCH] 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/form/components/form-renderer.component.html  |  4 ++--
 .../lib/form/components/form-renderer.component.scss  | 11 +++++------
 .../src/lib/form/components/form-cloud.component.html |  4 +---
 .../src/lib/form/components/form-cloud.component.scss | 11 ++---------
 4 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/lib/core/src/lib/form/components/form-renderer.component.html b/lib/core/src/lib/form/components/form-renderer.component.html
index 1834fcc9f4..ae79dce060 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.html
+++ b/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>
diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
index d17ae5bf8f..49da89f04d 100644
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/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%;
     }
 }
 
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
index 5fae157ffa..3225f098a6 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@@ -78,8 +78,7 @@
                 <mat-card-content class="adf-form-container-card-content">
                     <adf-form-renderer [formDefinition]="form" [readOnly]="readOnly" />
                 </mat-card-content>
-                <div class="adf-cloud-form-content-card-actions">
-                    <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
+                    <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-cloud-form-content-card-actions" align="end">
                         <mat-checkbox
                             id="adf-form-open-next-task"
                             *ngIf="showNextTaskCheckbox && showCompleteButton"
@@ -103,7 +102,6 @@
                             </button>
                         </ng-container>
                     </mat-card-actions>
-                </div>
             </div>
         </mat-card>
     </div>
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
index 461947163f..fbdc562b6e 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
@@ -72,9 +72,10 @@
     }
 
     &-content-card {
-        padding-bottom: 4em;
+        padding-bottom: 2em;
         overflow-y: auto;
         position: static;
+        height: 70%;
 
         &-fullscreen {
             padding: 0;
@@ -92,14 +93,6 @@
                 }
             }
         }
-
-        &-actions {
-            position: fixed;
-            bottom: 0;
-            width: -webkit-fill-available;
-            z-index: 1;
-            background-color: white;
-        }
     }
 
     &-sidebars {