From ef29bafc755be582ebc5d09085edee20f5381b33 Mon Sep 17 00:00:00 2001
From: Alex Molodyh <140214274+amolodyh-hyland@users.noreply.github.com>
Date: Thu, 18 Sep 2025 16:41:11 -0700
Subject: [PATCH] [AAE-37563] Added grey background to fullscreen and
 standalone fullscreen forms (#11208)

---
 .../form/components/form-cloud.component.html |  7 +++-
 .../form/components/form-cloud.component.scss | 34 ++++++++++++++++---
 2 files changed, 35 insertions(+), 6 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 9d3ecfa643..1048df034d 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
@@ -7,7 +7,11 @@
     class="adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container"
     [style]="formStyle"
 >
-    <div class="adf-cloud-form-content" [cdkTrapFocus]="displayConfiguration?.options?.trapFocus" cdkTrapFocusAutoCapture>
+    <div
+        class="adf-cloud-form-content"
+        [class.adf-cloud-form-content-standalone-fullscreen]="displayMode === 'standalone' && displayConfiguration?.options?.fullscreen"
+        [cdkTrapFocus]="displayConfiguration?.options?.trapFocus"
+        cdkTrapFocusAutoCapture>
         <adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayConfiguration?.options?.displayToolbar">
             <div class="adf-cloud-form__form-title">
                 <span class="adf-cloud-form__display-name" [title]="form.taskName">
@@ -38,6 +42,7 @@
             appearance="outlined"
             class="adf-cloud-form-content-card"
             [class.adf-cloud-form-content-card-fullscreen]="displayMode === 'fullScreen'"
+            [class.adf-cloud-form-content-card-fullscreen-toolbar]="displayMode === 'fullScreen' && displayConfiguration?.options?.displayToolbar"
         >
             <div class="adf-cloud-form-content-card-container">
                 <mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
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 a053078df4..6d0ce96e3a 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
@@ -10,7 +10,14 @@
 }
 
 .adf-cloud-form {
+    &-content-standalone-fullscreen {
+        background-color: transparent;
+        border-radius: 14px;
+    }
+
     &-container {
+        border-radius: 14px;
+
         .adf-cloud-form-content {
             @extend .adf-full-screen;
 
@@ -22,11 +29,22 @@
     }
 
     &-fullscreen-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 100000;
+        background-color: var(--adf-theme-mat-grey-color-a400);
+        display: block;
+        height: 100%;
+        width: 100vw;
+        overflow-y: auto;
+        border-radius: 0 0 14px;
+
         .adf-cloud-form-content {
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 100000;
+            width: calc(100% - 80px);
+            max-width: 1366px;
+            height: auto;
+            margin: 40px auto;
         }
     }
 
@@ -34,9 +52,10 @@
         @extend .adf-full-screen;
     }
 
-    &-toolbar {
+    &-toolbar ::ng-deep {
         #{ms.$mat-toolbar} {
             background-color: var(--adf-theme-background-card-color-087);
+            border-radius: 14px 14px 0 0;
         }
     }
 
@@ -72,6 +91,7 @@
         overflow-y: auto;
         position: static;
         height: 70%;
+        border-radius: 14px;
 
         &-fullscreen {
             padding: 0;
@@ -79,6 +99,10 @@
             width: 100%;
             position: relative;
 
+            &-toolbar {
+                border-radius: 0 0 14px 14px;
+            }
+
             &-container {
                 display: flex;
                 flex-direction: column;