From 1a83bc143e795a269043c9882e42f4962334f3e7 Mon Sep 17 00:00:00 2001
From: ashis-kumar-dev <ashiskumarmaharana@gmail.com>
Date: Sun, 7 Jan 2024 14:55:24 +0530
Subject: [PATCH 1/4] use describeSObjects instead of getGlobalDescribe -
 getGlobalDescribe is slower in performance

---
 .../main/default/classes/DynamicFormsController.cls      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/evolve-forms/main/default/classes/DynamicFormsController.cls b/evolve-forms/main/default/classes/DynamicFormsController.cls
index 4a299a6..8bf23ae 100644
--- a/evolve-forms/main/default/classes/DynamicFormsController.cls
+++ b/evolve-forms/main/default/classes/DynamicFormsController.cls
@@ -166,8 +166,7 @@ public with sharing class DynamicFormsController {
     String apiNamesCsv = '';
 
     try {
-      Schema.FieldSet fieldSet = Schema.getGlobalDescribe()
-        .get(objectApiName)
+      Schema.FieldSet fieldSet = getSObjectTypeByApiName
         .getDescribe()
         .fieldsets.getMap()
         .get(fieldSetApiName);
@@ -286,7 +285,7 @@ public with sharing class DynamicFormsController {
     DynamicFormsController.Field[] fieldList = new List<DynamicFormsController.Field>();
     Map<String, DynamicFormsController.Field> fieldsToQuery = new Map<String, DynamicFormsController.Field>();
 
-    SObjectType schemaType = Schema.getGlobalDescribe().get(sObjectType);
+    SObjectType schemaType = getSObjectTypeByApiName(sObjectType);
     Map<String, SObjectField> fieldMap = schemaType.getDescribe()
       .fields.getMap();
 
@@ -763,4 +762,8 @@ public with sharing class DynamicFormsController {
       ];
     }
   }
+  
+  private Schema.SObjectType getSObjectTypeByApiName(String sobjectApiName) {
+    return Schema.describeSObjects(new String[] {sobjectApiName});
+  }
 }

From c7e9772fe4762d513b9f3d7947fcb4502ae67e0a Mon Sep 17 00:00:00 2001
From: ashis-kumar-dev <ashiskumarmaharana@gmail.com>
Date: Sun, 7 Jan 2024 14:57:37 +0530
Subject: [PATCH 2/4] fix: describeSObjects returns a list - return the first
 result

---
 evolve-forms/main/default/classes/DynamicFormsController.cls | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/evolve-forms/main/default/classes/DynamicFormsController.cls b/evolve-forms/main/default/classes/DynamicFormsController.cls
index 8bf23ae..2221427 100644
--- a/evolve-forms/main/default/classes/DynamicFormsController.cls
+++ b/evolve-forms/main/default/classes/DynamicFormsController.cls
@@ -764,6 +764,6 @@ public with sharing class DynamicFormsController {
   }
   
   private Schema.SObjectType getSObjectTypeByApiName(String sobjectApiName) {
-    return Schema.describeSObjects(new String[] {sobjectApiName});
+    return Schema.describeSObjects(new String[] {sobjectApiName}).get(0);
   }
 }

From bc644689a876f8a5ce45f7bbc64c1c5f7f09287e Mon Sep 17 00:00:00 2001
From: ashis-kumar-dev <ashiskumarmaharana@gmail.com>
Date: Sun, 7 Jan 2024 15:43:53 +0530
Subject: [PATCH 3/4] use lwc:if, lwc:elseif, lwc:else instead of if:true and
 if:false directives

---
 .../calculatedFieldSection.html               | 32 ++++----
 .../dynamicFormsCollapsibleSection.html       | 10 +--
 .../dynamicFormsCompactPageLayout.html        | 19 ++---
 .../dynamicFormsCreate.html                   | 12 +--
 .../dynamicFormsFieldSection.html             | 80 +++++++++----------
 .../dynamicFormsFieldSet.html                 |  2 +-
 .../dynamicFormsRelatedRecord.html            | 15 ++--
 .../dynamicFormsSaveCancel.html               | 11 +--
 8 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/evolve-forms/main/default/lwc/calculatedFieldSection/calculatedFieldSection.html b/evolve-forms/main/default/lwc/calculatedFieldSection/calculatedFieldSection.html
index ea260d6..75df18e 100644
--- a/evolve-forms/main/default/lwc/calculatedFieldSection/calculatedFieldSection.html
+++ b/evolve-forms/main/default/lwc/calculatedFieldSection/calculatedFieldSection.html
@@ -15,9 +15,9 @@
 -->
 
 <template>
-  <template if:true={hasFields}>
+  <template lwc:if={hasFields}>
     <div class={boundaryTheme}>
-      <template if:true={showSpinner}>
+      <template lwc:if={showSpinner}>
         <lightning-spinner size="small"></lightning-spinner>
       </template>
       <c-dynamic-forms-collapsible-section
@@ -35,7 +35,7 @@
                 <div class="slds-form-element__label slds-p-top_xx-small">
                   {field.label}
                 </div>
-                <template if:true={field.helpText}>
+                <template lwc:if={field.helpText}>
                   <lightning-helptext
                     content={field.helpText}
                   ></lightning-helptext>
@@ -44,7 +44,7 @@
                   <div
                     class="slds-form-slds-form-element__static slds-p-bottom_xx-small slds-hyphenate"
                   >
-                    <template if:true={field.address}>
+                    <template lwc:if={field.address}>
                       <lightning-formatted-address
                         city={field.address.city}
                         country={field.address.country}
@@ -59,7 +59,7 @@
                       >
                       </lightning-formatted-address>
                     </template>
-                    <template if:true={field.dateTimeValue}
+                    <template lwc:elseif={field.dateTimeValue}
                       ><lightning-formatted-date-time
                         day={field.dateTimeValue.day}
                         era={field.dateTimeValue.era}
@@ -76,7 +76,7 @@
                       >
                       </lightning-formatted-date-time>
                     </template>
-                    <template if:true={field.email}>
+                    <template lwc:elseif={field.email}>
                       <lightning-formatted-email
                         hide-icon={field.email.hideIcon}
                         label={field.email.label}
@@ -85,14 +85,14 @@
                       >
                       </lightning-formatted-email>
                     </template>
-                    <template if:true={field.location}>
+                    <template lwc:elseif={field.location}>
                       <lightning-formatted-location
                         latitude={field.location.latitude}
                         longitude={field.location.longitude}
                       >
                       </lightning-formatted-location>
                     </template>
-                    <template if:true={field.name}>
+                    <template lwc:elseif={field.name}>
                       <lightning-formatted-name
                         first-name={field.name.firstName}
                         format={field.name.format}
@@ -104,7 +104,7 @@
                       >
                       </lightning-formatted-name>
                     </template>
-                    <template if:true={field.numberValue}>
+                    <template lwc:elseif={field.numberValue}>
                       <lightning-formatted-number
                         currency-code={field.numberValue.currencyCode}
                         currency-display-as={field.numberValue.currencyDisplayAs}
@@ -118,7 +118,7 @@
                       >
                       </lightning-formatted-number>
                     </template>
-                    <template if:true={field.phoneNumber}>
+                    <template lwc:elseif={field.phoneNumber}>
                       <lightning-formatted-phone
                         disabled={field.phoneNumber.disabled}
                         tab-index={field.phoneNumber.tabIndex}
@@ -126,14 +126,14 @@
                       >
                       </lightning-formatted-phone>
                     </template>
-                    <template if:true={field.text}>
-                      <template if:true={field.text.isRich}>
+                    <template lwc:elseif={field.text}>
+                      <template lwc:if={field.text.isRich}>
                         <lightning-formatted-rich-text
                           linkify={field.text.linkify}
                           value={field.text.value}
                         ></lightning-formatted-rich-text>
                       </template>
-                      <template if:false={field.text.isRich}>
+                      <template lwc:else>
                         <lightning-formatted-text
                           linkify={field.text.linkify}
                           value={field.text.value}
@@ -141,11 +141,11 @@
                         </lightning-formatted-text>
                       </template>
                     </template>
-                    <template if:true={field.timeValue}>
+                    <template lwc:elseif={field.timeValue}>
                       <lightning-formatted-time value={field.timeValue.value}>
                       </lightning-formatted-time>
                     </template>
-                    <template if:true={field.url}>
+                    <template lwc:elseif={field.url}>
                       <lightning-formatted-url
                         label={field.url.label}
                         tab-index={field.url.tabIndex}
@@ -155,7 +155,7 @@
                       >
                       </lightning-formatted-url>
                     </template>
-                    <template if:true={field.isBoolean}>
+                    <template lwc:elseif={field.isBoolean}>
                       <div class="slds-checkbox">
                         <input type="checkbox" checked={field.booleanValue} />
                         <span class="slds-checkbox_faux"></span>
diff --git a/evolve-forms/main/default/lwc/dynamicFormsCollapsibleSection/dynamicFormsCollapsibleSection.html b/evolve-forms/main/default/lwc/dynamicFormsCollapsibleSection/dynamicFormsCollapsibleSection.html
index ecb7946..a726a5b 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsCollapsibleSection/dynamicFormsCollapsibleSection.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsCollapsibleSection/dynamicFormsCollapsibleSection.html
@@ -14,8 +14,11 @@
  limitations under the License.
 -->
 
-<template>
-  <template if:false={hideLabel}>
+<template>  
+  <template lwc:if={hideLabel}>
+    <slot></slot>
+  </template>
+  <template lwc:else>
     <div class={sectionClass}>
       <div class="slds-section__title">
         <button
@@ -43,7 +46,4 @@
       </div>
     </div>
   </template>
-  <template if:true={hideLabel}>
-    <slot></slot>
-  </template>
 </template>
diff --git a/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html b/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html
index ff8dc74..e4f0510 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html
@@ -25,14 +25,7 @@
         <div class="slds-popover__header">
           <header class="slds-media slds-media_center slds-m-bottom_small">
             <div class="slds-media__body" style="display: contents">
-              <template if:false={isLookupRecordType}>
-                <img
-                  src={iconUrl}
-                  style={iconBackgroundColor}
-                  class="iconSizing"
-                />
-              </template>
-              <template if:true={isLookupRecordType}>
+              <template lwc:if={isLookupRecordType}>
                 <lightning-icon
                   icon-name="standard:record"
                   alternative-text="Record Type"
@@ -40,13 +33,21 @@
                   class="iconSizing"
                 ></lightning-icon>
               </template>
+              <template lwc:else>
+                <img
+                  src={iconUrl}
+                  style={iconBackgroundColor}
+                  class="iconSizing"
+                />
+              </template>
               <h2 class="slds-text-heading_medium slds-hyphenate">
                 {lookupFieldValue}
               </h2>
             </div>
           </header>
         </div>
-        <template if:false={isLookupUserOrGroupOrRecordType}>
+        <template lwc:if={isLookupUserOrGroupOrRecordType}></template>
+        <template lwc:else>
           <div class="slds-popover__body lookupHoverBody">
             <lightning-record-form
               record-id={lookupRecordId}
diff --git a/evolve-forms/main/default/lwc/dynamicFormsCreate/dynamicFormsCreate.html b/evolve-forms/main/default/lwc/dynamicFormsCreate/dynamicFormsCreate.html
index 2541192..b221f63 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsCreate/dynamicFormsCreate.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsCreate/dynamicFormsCreate.html
@@ -16,12 +16,12 @@
 
 <template>
   <!-- Implementation for bottom of page-pinned button -->
-  <template if:true={pinToBottom}>
+  <template lwc:if={pinToBottom}>
     <div class="bump"></div>
     <div
       class="slds-box slds-docked-form-footer slds-theme_default slds-align_absolute-center pinnedFooter"
     >
-      <template if:true={includeCancelButton}>
+      <template lwc:if={includeCancelButton}>
         <lightning-button
           variant="neutral"
           label="Cancel"
@@ -43,8 +43,8 @@
   </template>
 
   <!-- Implementation for standalone button -->
-  <template if:false={pinToBottom}>
-    <template if:true={includeCancelButton}>
+  <template lwc:else>
+    <template lwc:if={includeCancelButton}>
       <lightning-button
         variant="neutral"
         label="Cancel"
@@ -65,7 +65,7 @@
     </lightning-button>
   </template>
 
-  <template if:true={showModal}>
+  <template lwc:if={showModal}>
     <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
       <div class="slds-modal__container">
         <header class="slds-modal__header">
@@ -81,7 +81,7 @@
           class="slds-modal__content slds-p-around_medium"
           id="modal-content-id-1"
         >
-          <template if:true={currentWarnings}>
+          <template lwc:if={currentWarnings}>
             <div class="slds-align_absolute-center">
               <ul class="slds-list_dotted" tabindex="0">
                 <template for:each={currentWarnings} for:item="warning">
diff --git a/evolve-forms/main/default/lwc/dynamicFormsFieldSection/dynamicFormsFieldSection.html b/evolve-forms/main/default/lwc/dynamicFormsFieldSection/dynamicFormsFieldSection.html
index 20df341..52066ac 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsFieldSection/dynamicFormsFieldSection.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsFieldSection/dynamicFormsFieldSection.html
@@ -15,7 +15,7 @@
 -->
 
 <template>
-  <template if:true={shouldRenderSection}>
+  <template lwc:if={shouldRenderSection}>
     <div class={boundaryTheme}>
       <lightning-record-edit-form
         record-id={recordId}
@@ -27,7 +27,7 @@
           record-id={recordId}
           object-api-name={objectApiName}
         >
-          <template if:true={showSpinner}>
+          <template lwc:if={showSpinner}>
             <lightning-spinner size="small"></lightning-spinner>
           </template>
           <c-dynamic-forms-collapsible-section
@@ -42,16 +42,16 @@
                   key={element.key}
                   padding="horizontal-small"
                 >
-                  <template if:true={element.isSpace}>
+                  <template lwc:if={element.isSpace}>
                     <div class="slds-form__item slds-no-space blankSpace"></div>
                   </template>
-                  <template if:false={element.isSpace}>
-                    <template if:true={editMode}>
-                      <template if:true={element.labelOverride}>
+                  <template lwc:else>
+                    <template lwc:if={editMode}>
+                      <template lwc:if={element.labelOverride}>
                         <ul class="slds-form-element__label">
                           <li class="slds-item">{element.labelOverride}</li>
                         </ul>
-                        <template if:true={element.helpText}>
+                        <template lwc:if={element.helpText}>
                           <lightning-helptext
                             content={element.helpText}
                           ></lightning-helptext>
@@ -81,7 +81,7 @@
                         </div>
                       </template>
                     </template>
-                    <template if:false={editMode}>
+                    <template lwc:else>
                       <lightning-layout
                         vertical-align="center"
                         class="slds-border_bottom"
@@ -89,48 +89,25 @@
                         onmouseout={hoverOffField}
                         data-field-api-name={element.fieldApiName}
                       >
-                        <lightning-layout-item flexibility="auto">
-                          <template if:false={element.isReference}>
-                            <div
-                              class="slds-form-element slds-form-element_stacked"
-                            >
-                              <template if:true={element.labelOverride}>
-                                <ul class="slds-form-element__label">
-                                  <li class="slds-item">
-                                    {element.labelOverride}
-                                  </li>
-                                </ul>
-                                <template if:true={element.helpText}>
-                                  <lightning-helptext
-                                    content={element.helpText}
-                                  ></lightning-helptext>
-                                </template>
-                              </template>
-                              <lightning-output-field
-                                field-name={element.fieldApiName}
-                                variant={element.labelVariant}
-                              >
-                              </lightning-output-field>
-                            </div>
-                          </template>
+                      <lightning-layout-item flexibility="auto">
                           <!-- Mimic the look of an output field for reference values-->
                           <!-- This is due to page layout dependencies on lookup fields -->
                           <!-- See https://help.salesforce.com/s/articleView?id=000349125&type=1 -->
-                          <template if:true={element.isReference}>
+                          <template lwc:if={element.isReference}>
                             <div
                               class="slds-form-element slds-form-element_stacked"
                             >
                               <ul class="slds-form-element__label">
                                 <li class="slds-item">
-                                  <template if:true={element.labelOverride}>
+                                  <template lwc:if={element.labelOverride}>
                                     {element.labelOverride}
                                   </template>
-                                  <template if:false={element.labelOverride}>
+                                  <template lwc:else>
                                     {element.fieldLabel}
                                   </template>
                                 </li>
                               </ul>
-                              <template if:true={element.helpText}>
+                              <template lwc:if={element.helpText}>
                                 <lightning-helptext
                                   content={element.helpText}
                                 ></lightning-helptext>
@@ -138,7 +115,7 @@
                               <div
                                 class="slds-form-element__control lookupFieldValueContainer"
                               >
-                                <template if:true={element.referenceName}>
+                                <template lwc:if={element.referenceName}>
                                   <a
                                     class="slds-form-element__static lookupField"
                                     data-record-id={element.referenceValue}
@@ -152,7 +129,7 @@
                                     {element.referenceName}
 
                                     <template
-                                      if:true={element.showLookupCompactLayout}
+                                      lwc:if={element.showLookupCompactLayout}
                                     >
                                       <div
                                         onmouseover={hoverOverCompactLayout}
@@ -168,7 +145,7 @@
                                       </div>
                                     </template>
                                   </a>
-                                  <template if:true={element.isSystemField}>
+                                  <template lwc:if={element.isSystemField}>
                                     <span class="systemDateTime"
                                       >, {element.systemDateValue}</span
                                     >
@@ -177,6 +154,29 @@
                               </div>
                             </div>
                           </template>
+                          <template lwc:else>
+                            <div
+                              class="slds-form-element slds-form-element_stacked"
+                            >
+                              <template lwc:if={element.labelOverride}>
+                                <ul class="slds-form-element__label">
+                                  <li class="slds-item">
+                                    {element.labelOverride}
+                                  </li>
+                                </ul>
+                                <template lwc:if={element.helpText}>
+                                  <lightning-helptext
+                                    content={element.helpText}
+                                  ></lightning-helptext>
+                                </template>
+                              </template>
+                              <lightning-output-field
+                                field-name={element.fieldApiName}
+                                variant={element.labelVariant}
+                              >
+                              </lightning-output-field>
+                            </div>
+                          </template>
                         </lightning-layout-item>
                         <lightning-layout-item
                           flexibility="no-shrink"
@@ -209,7 +209,7 @@
         </lightning-record-view-form>
       </lightning-record-edit-form>
     </div>
-    <template if:true={error}>
+    <template lwc:if={error}>
       <p>error</p>
     </template>
   </template>
diff --git a/evolve-forms/main/default/lwc/dynamicFormsFieldSet/dynamicFormsFieldSet.html b/evolve-forms/main/default/lwc/dynamicFormsFieldSet/dynamicFormsFieldSet.html
index ba99fe8..277c2bb 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsFieldSet/dynamicFormsFieldSet.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsFieldSet/dynamicFormsFieldSet.html
@@ -15,7 +15,7 @@
 -->
 
 <template>
-  <template if:true={apiNamesCsv}>
+  <template lwc:if={apiNamesCsv}>
     <c-dynamic-forms-field-section
       record-id={recordId}
       object-api-name={objectApiName}
diff --git a/evolve-forms/main/default/lwc/dynamicFormsRelatedRecord/dynamicFormsRelatedRecord.html b/evolve-forms/main/default/lwc/dynamicFormsRelatedRecord/dynamicFormsRelatedRecord.html
index d94b90b..f61a5bc 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsRelatedRecord/dynamicFormsRelatedRecord.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsRelatedRecord/dynamicFormsRelatedRecord.html
@@ -15,20 +15,21 @@
 -->
 
 <template>
-  <template if:false={hideComponent}>
-    <template if:true={sectionIcon}>
+  <template lwc:if={hideComponent}></template>
+  <template lwc:else>
+    <template lwc:if={sectionIcon}>
       <lightning-card icon-name={sectionIcon}>
         <a slot="title" class="slds-card__header-link" onclick={openRecord}>
           {sectionLabel}
         </a>
-        <template if:true={errorMessage}>
+        <template lwc:if={errorMessage}>
           <div
             class="infoMessage slds-align--absolute-center slds-var-m-bottom_medium"
           >
             {errorMessage}
           </div>
         </template>
-        <template if:true={shouldRenderSection}>
+        <template lwc:if={shouldRenderSection}>
           <c-dynamic-forms-field-section
             record-id={relatedRecordId}
             object-api-name={relatedRecordObjectApiName}
@@ -52,15 +53,15 @@
         </template>
       </lightning-card>
     </template>
-    <template if:false={sectionIcon}>
-      <template if:true={errorMessage}>
+    <template lwc:else>
+      <template lwc:if={errorMessage}>
         <div
           class="infoMessage slds-align--absolute-center slds-var-m-bottom_medium"
         >
           {errorMessage}
         </div>
       </template>
-      <template if:true={shouldRenderSection}>
+      <template lwc:if={shouldRenderSection}>
         <c-dynamic-forms-field-section
           record-id={relatedRecordId}
           object-api-name={relatedRecordObjectApiName}
diff --git a/evolve-forms/main/default/lwc/dynamicFormsSaveCancel/dynamicFormsSaveCancel.html b/evolve-forms/main/default/lwc/dynamicFormsSaveCancel/dynamicFormsSaveCancel.html
index 2c102a6..a85a45e 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsSaveCancel/dynamicFormsSaveCancel.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsSaveCancel/dynamicFormsSaveCancel.html
@@ -15,11 +15,12 @@
 -->
 
 <template>
-  <template if:true={editMode}>
-    <template if:false={detach}>
+  <template lwc:if={editMode}>
+    <template lwc:if={detach}></template>
+    <template lwc:else>
       <div class="bump"></div>
     </template>
-    <template if:true={showModal}>
+    <template lwc:if={showModal}>
       <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
           <header class="slds-modal__header">
@@ -35,7 +36,7 @@
             class="slds-modal__content slds-p-around_medium"
             id="modal-content-id-1"
           >
-            <template if:true={currentWarnings}>
+            <template lwc:if={currentWarnings}>
               <div class="slds-align_absolute-center">
                 <ul class="slds-list_dotted" tabindex="0">
                   <template for:each={currentWarnings} for:item="warning">
@@ -45,7 +46,7 @@
               </div>
             </template>
 
-            <template if:true={conflictingFieldsTabData.length}>
+            <template lwc:if={conflictingFieldsTabData.length}>
               <p>
                 This record was modified during your edit session. Please select
                 values for conflicting fields.

From 735dddf89b6034b0bf8c63aed9650925917234e0 Mon Sep 17 00:00:00 2001
From: ashis-kumar-dev <ashiskumarmaharana@gmail.com>
Date: Sun, 7 Jan 2024 15:49:00 +0530
Subject: [PATCH 4/4] replace styles with equivalent slds classes

---
 .../dynamicFormsCompactPageLayout.html                       | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html b/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html
index e4f0510..ee4e77b 100644
--- a/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html
+++ b/evolve-forms/main/default/lwc/dynamicFormsCompactPageLayout/dynamicFormsCompactPageLayout.html
@@ -16,10 +16,9 @@
 
 <template>
   <div>
-    <div style="position: relative; display: block">
+    <div class="slds-is-relative slds-show">
       <section
-        class="slds-popover slds-popover_panel slds-nubbin_top-left"
-        style="position: absolute"
+        class="slds-popover slds-popover_panel slds-nubbin_top-left slds-is-absolute"
         role="dialog"
       >
         <div class="slds-popover__header">