From de94e718f2b1a1252fdd7de41b64962489556f39 Mon Sep 17 00:00:00 2001
From: Alaa Smadi <alaasmadi1010@gmail.com>
Date: Mon, 22 Jun 2026 18:19:53 +0300
Subject: [PATCH] refactor safe area to handle android edge2edge

---
 widget/assets/css/media.css                  | 2 +-
 widget/assets/css/widget.app.css             | 7 +++++--
 widget/controllers/widget.home.controller.js | 5 -----
 widget/templates/layouts/now-playing.html    | 2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/widget/assets/css/media.css b/widget/assets/css/media.css
index 65e4b1e..3118447 100644
--- a/widget/assets/css/media.css
+++ b/widget/assets/css/media.css
@@ -7,7 +7,7 @@ html {
     font-size: 16px !important;
 }
 
-.slide.safe-area {
+.slide {
     padding-top: var(--bf-safe-area-inset-top) !important;
 }
 .caption {
diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css
index 139e569..085dd2b 100644
--- a/widget/assets/css/widget.app.css
+++ b/widget/assets/css/widget.app.css
@@ -1020,7 +1020,7 @@ img.done-icon {
 }
 
 .playlist-empty-container {
-    height: calc(100vh - 5rem);
+    height: calc(100vh - 65px - var(--bf-safe-area-inset-bottom));
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1466,6 +1466,8 @@ input[type="checkbox"]:checked+.subcategory-label.minus::before {
     left: 0;
     right: 0;
     padding: 15px;
+    padding-bottom: calc(16px + var(--bf-safe-area-inset-bottom));
+    background-color: var(--bf-theme-background);
     justify-content: center;
 }
 
@@ -1484,6 +1486,7 @@ input[type="checkbox"]:checked+.subcategory-label.minus::before {
     font-size: .875rem !important;
     padding: 0 16px 0 16px !important;
     height: 36px;
+    width: calc(100% - 32px);
 }
 
 .filter-funnel {
@@ -1491,7 +1494,7 @@ input[type="checkbox"]:checked+.subcategory-label.minus::before {
     color: var(--bf-theme-primary);
 }
 
-.slide.safe-area.launcher-with-filter {
+.slide {
     padding-top: var(--bf-safe-area-inset-top) !important;
 }
 
diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js
index bed8957..e8321dd 100644
--- a/widget/controllers/widget.home.controller.js
+++ b/widget/controllers/widget.home.controller.js
@@ -21,11 +21,6 @@
 
                 const isLauncher = window.location.href.includes('launcherPlugin');
                 const slideElement = document.querySelector(".slide");
-                if (isLauncher) {
-                    slideElement.classList.add("safe-area");
-                } else {
-                    slideElement.classList.remove("safe-area");
-                }
 
                 buildfire.navigation.onAppLauncherActive(() => {
                     $rootScope.refreshItems();
diff --git a/widget/templates/layouts/now-playing.html b/widget/templates/layouts/now-playing.html
index 18cce93..9a0f785 100644
--- a/widget/templates/layouts/now-playing.html
+++ b/widget/templates/layouts/now-playing.html
@@ -135,7 +135,7 @@ <h4 class="margin-zero ellipsis whiteTheme">{{NowPlaying.currentTrack.title}}</h
     <!-- Playlist Overlay -->
     <div ng-if="showPlaylist" class="overlay backgroundColorTheme slide"
         style="position:fixed; top:0; left:0; width:100%; height:100%;">
-        <div class="overlay-content" style="position:absolute; top:0; left:0; height:100%; width: 100%; overflow:auto;">
+        <div class="overlay-content" style="position:absolute; top:0; left:0; height:100%; width: 100%; overflow:auto; padding-bottom: calc(16px + var(--bf-safe-area-inset-bottom));">
             <div class="media-player-list-layout third-layout">
                 <div class="list-layout has-btns">
                     <div class="list-item overflow-hidden"