From 0e085bc73a48908bb4cf4ce9c0dcb2d536b2f0dc Mon Sep 17 00:00:00 2001
From: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
Date: Fri, 4 Oct 2024 11:11:57 +0100
Subject: [PATCH] AAE-22043 Fix long form flow outside container (#10265)

* AAE-22043 Fix long form flow outside container

* AAE-22043 Fix unit test
---
 .../form/components/form-cloud.component.html |  8 ++++++--
 .../form/components/form-cloud.component.scss | 20 +++++++++++--------
 .../components/form-cloud.component.spec.ts   |  4 ++--
 3 files changed, 20 insertions(+), 12 deletions(-)

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 1306de1c1c..94e63d9c0a 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
@@ -36,7 +36,11 @@
                     </button>
             </adf-toolbar>
 
-            <mat-card appearance="outlined" [class.adf-cloud-form-content-card]="displayConfiguration?.options?.fullscreen">
+            <mat-card 
+                appearance="outlined"
+                class="adf-cloud-form-content-card"
+                [class.adf-cloud-form-content-card-fullscreen]="displayMode === 'fullScreen'"
+            >
                 <div class="adf-cloud-form-content-card-container">
                 <mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
                     <mat-card-title>
@@ -93,4 +97,4 @@
                 </div>
             </mat-card>
         </div>
-</div>
+</div>
\ No newline at end of file
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 5746a1f816..b374f6e9ed 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
@@ -67,18 +67,22 @@
     }
 
     &-content-card {
-        padding: 0;
-        height: 100%;
-        width: 100%;
+        overflow-y: auto;
 
-        .adf-cloud-form-content-card-container {
-            display: flex;
-            flex-direction: column;
+        &-fullscreen {
+            padding: 0;
             height: 100%;
+            width: 100%;
 
-            #{$mat-card-content} {
+            .adf-cloud-form-content-card-container {
+                display: flex;
+                flex-direction: column;
                 height: 100%;
-                overflow: hidden auto;
+
+                #{$mat-card-content} {
+                    height: 100%;
+                    overflow: hidden auto;
+                }
             }
         }
     }
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
index 9116c2a88b..e42eec7ccb 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
@@ -1319,7 +1319,7 @@ describe('FormCloudComponent', () => {
         });
 
         it('should not set the styles for the card', () => {
-            const fullScreenCard = fixture.debugElement.query(By.css('.adf-cloud-form-content-card'));
+            const fullScreenCard = fixture.debugElement.query(By.css('.adf-cloud-form-content-card-fullscreen'));
             expect(fullScreenCard).toBeNull();
         });
 
@@ -1405,7 +1405,7 @@ describe('FormCloudComponent', () => {
             });
 
             it('should set the styles for the card', () => {
-                const fullScreenCard = fixture.debugElement.query(By.css('.adf-cloud-form-content-card'));
+                const fullScreenCard = fixture.debugElement.query(By.css('.adf-cloud-form-content-card-fullscreen'));
                 expect(fullScreenCard).not.toBeNull();
             });