From 91253fce0ba5a9f6283abcc87998ea96f6b7e9ca Mon Sep 17 00:00:00 2001
From: Alaa Smadi <alaasmadi1010@gmail.com>
Date: Mon, 22 Jun 2026 06:17:59 +0300
Subject: [PATCH 1/2] handle sae area with android edge2edge

---
 .eslintrc                        |  3 +--
 widget/index.html                |  1 -
 widget/js/utils/safeAreaStyle.js | 11 -----------
 widget/style/style.css           | 26 +++++++++++---------------
 widget/widget.js                 |  1 -
 5 files changed, 12 insertions(+), 30 deletions(-)
 delete mode 100644 widget/js/utils/safeAreaStyle.js

diff --git a/.eslintrc b/.eslintrc
index ecc3421..cb4490c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -70,7 +70,6 @@
     "ANALYTICS_EVENTS": true,
     "NotificationsManager": true,
     "AnalyticsManager": true,
-    "parseDeeplinkData": true,
-    "applySafeAreaStyles": true
+    "parseDeeplinkData": true
   }
 }
diff --git a/widget/index.html b/widget/index.html
index 3040ded..fe829a8 100644
--- a/widget/index.html
+++ b/widget/index.html
@@ -52,7 +52,6 @@
     <script src="./js/utils/handleCPSync.js"></script>
     <script src="./js/utils/resizeImage.js"></script>
     <script src="./js/utils/parseDeeplinkData.js"></script>
-    <script src="./js/utils/safeAreaStyle.js"></script>
     <script src="./js/notificationManager.js"></script>
     <script src="./js/pages/customer/CustomerView.js"></script>
     <script src="./js/pages/employee/EmployeeView.js"></script>
diff --git a/widget/js/utils/safeAreaStyle.js b/widget/js/utils/safeAreaStyle.js
deleted file mode 100644
index 0b81aeb..0000000
--- a/widget/js/utils/safeAreaStyle.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const applySafeAreaStyles = () => {
-  const { navbarEnabled } = buildfire.getContext();
-  const rootElement = document.querySelector('html');
-  const isSafeAreaEnabled = rootElement.getAttribute('safe-area') === 'true';
-  if (isSafeAreaEnabled) {
-    if (!navbarEnabled) {
-      const body = document.querySelector('body');
-      body.classList.add('has-safe-area');
-    }
-  }
-};
diff --git a/widget/style/style.css b/widget/style/style.css
index a6b5e82..6b74eca 100644
--- a/widget/style/style.css
+++ b/widget/style/style.css
@@ -26,10 +26,7 @@ object {
 #home {
     height: 100vh;
     overflow: scroll;
-}
-
-body.has-safe-area #home {
-    height: calc(100vh - var(--bf-safe-area-inset-bottom)) !important;
+    padding-bottom: calc(16px + var(--bf-safe-area-inset-bottom)) !important;
 }
 
 #home .listView-container > .empty_state {
@@ -50,6 +47,9 @@ body.has-safe-area #home {
 .rewardListContainer .listView-items {
     margin-bottom: 14px;
 }
+#transactionCustomerList .listView-items {
+    padding-bottom: calc(16px + var(--bf-safe-area-inset-bottom)) !important;
+}
 #friendlyId {
     padding-bottom: 1rem;
 }
@@ -67,10 +67,6 @@ body.has-safe-area #home {
     overflow: scroll;
 }
 
-body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmployeeList {
-    height: calc(90vh - var(--bf-safe-area-inset-bottom)) !important;
-}
-
 
 .skeleton-sentences {
     padding: 20px 0;
@@ -91,6 +87,10 @@ body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmpl
     margin-top: -50px;
 }
 
+#transactionEmployeeList {
+    padding-bottom: calc(4px + var(--bf-safe-area-inset-bottom)) !important;
+}
+
 #transactionEmployeeList > .empty_state::after, #transactionCustomerList > .empty_state::after {
     font-size: 14px !important;
     font-weight: 400 !important;
@@ -254,13 +254,9 @@ body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmpl
 }
 
 #availableRewardList {
-    padding-bottom: 80px;
     position: relative;
     top: -9px;
-}
-
-html[safe-area="true"] body.has-safe-area #availableRewardList {
-    padding-bottom: calc(80px + var(--bf-safe-area-inset-bottom)) !important;
+    padding-bottom: 24px;
 }
 
 #availableRewardList.empty-state img {
@@ -268,7 +264,7 @@ html[safe-area="true"] body.has-safe-area #availableRewardList {
 }
 
 #confirmTransactionBtn {
-    width: 187.5px;
+    width: calc(100% - 32px);
     height: 40px;
     gap: 0;
     border-radius: 4px;
@@ -341,6 +337,6 @@ html[safe-area="true"] body.has-safe-area #availableRewardList {
     z-index: 1;
 }
 
-html[safe-area="true"] body.has-safe-area .btn-container {
+body .btn-container {
     padding-bottom: calc(1rem + var(--bf-safe-area-inset-bottom)) !important;
 }
diff --git a/widget/widget.js b/widget/widget.js
index d4155a2..bbdc78b 100644
--- a/widget/widget.js
+++ b/widget/widget.js
@@ -1,6 +1,5 @@
 const initApp = async () => {
   buildfire.appearance.titlebar.show();
-  applySafeAreaStyles();
   try {
     const { settingData } = await Settings.get();
     widgetAppState.settings = settingData;

From c0886f216cccc1a49af297922ecac34c8a14362d Mon Sep 17 00:00:00 2001
From: Alaa Smadi <alaasmadi1010@gmail.com>
Date: Mon, 22 Jun 2026 15:53:37 +0300
Subject: [PATCH 2/2] handle button background

---
 widget/style/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/widget/style/style.css b/widget/style/style.css
index 6b74eca..73a3d6f 100644
--- a/widget/style/style.css
+++ b/widget/style/style.css
@@ -339,4 +339,5 @@ object {
 
 body .btn-container {
     padding-bottom: calc(1rem + var(--bf-safe-area-inset-bottom)) !important;
+    background-color: var(--bf-theme-background) !important;
 }