Repository: woocommerce/woocommerce-android
Pull request #13638: [Android SDK] Revisit all dialog fragments
Author: login: kidinov
Labels: name: Tech Debt
Created: 2025-02-27T14:26:54Z | Merged: 2025-03-11T07:41:45Z

<!-- Remember about a good descriptive title. -->

Closes: #13631
<!-- Id number of the GitHub issue this PR addresses. -->

<!-- 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🛠 Need an AI review?  
Add a comment: `@coderabbitai review`
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-->

### Description
<!-- Take the time to write a good summary. Why is it needed? What does it do? When fixing bugs try to avoid just writing “See original issue” – clarify what the problem was and how you’ve fixed it. -->
The dialogs I visited:
* OrderFilterOptionsFragment
* CustomerListDialogFragment
* PrintingInstructionsFragment
* OrderFilterCategoriesFragment
* UpdateProductStockStatusFragment
* ProductSelectorDialogFragment
* VariationSelectorFragment
* FeatureAnnouncementDialogFragment (no changes here as seems to be working fine)
 I used `setStyle(STYLE_NO_TITLE, R.style.Theme_Woo)` as criteria for a visit, as from my understanding the rest DialogFramgents should be fine


### Testing information
<!-- This is your opportunity to break out individual scenarios that need testing (when necessary) and/or include a checklist for the reviewer to go through. Consider documenting the following from your own completed testing: devices used, alternate workflows, edge cases, affected areas, critical flows, areas not tested, and any remaining unknowns. Provide feedback on this new section of the PR template through Sept 30, 2024 to Apps Quality; additional context here: p91TBi-b8z-p2#comment-12036 -->
* Open all the fragments mentioned in the PR description. 
* Try tablet and phones. 
* Try landscape and portrait
* Different navigation modes - 3 buttons/gestures
* Different API levels

### The tests that have been performed
<!-- To give the reviewer an idea of what could be missed in terms of testing -->
Above

### Images/gif
<!-- Include before and after images or gifs when appropriate. -->
<img width="350" alt="image" src="https://github.com/user-attachments/assets/bac2ac04-c06f-411f-9a79-178e964726dc" />
<img width="350" alt="image" src="https://github.com/user-attachments/assets/07ece00a-b12b-47a5-b056-ded65400c452" />

---

<img width="350" alt="image" src="https://github.com/user-attachments/assets/aa8ee3d4-e855-407a-a718-7398c6b82454" />
<img width="350" alt="image" src="https://github.com/user-attachments/assets/e76407d1-1ba0-4a1e-8318-60654b0422b8" />

---

<img width="350" alt="image" src="https://github.com/user-attachments/assets/1c4aa5cb-aa96-4389-ad0b-1352a53f275e" />
<img width="350" alt="image" src="https://github.com/user-attachments/assets/540e7e65-2fd1-4f35-9bf0-88b14d76bd1f" />

---

<img width="350" alt="image" src="https://github.com/user-attachments/assets/53676073-f412-49f8-bf74-f1eb254d9d48" />
<img width="350" alt="image" src="https://github.com/user-attachments/assets/c637aa65-808f-429c-bced-260db6de47fc" />

---

<img width="350" alt="image" src="https://github.com/user-attachments/assets/838f7835-578c-4ed2-b2fb-3fe8947b720a" />
<img width="350" alt="image" src="https://github.com/user-attachments/assets/3415d251-4b65-421c-b63f-7063568209d8" />

---

<img width="350" alt="image" src="https://github.com/user-attachments/assets/dedfee84-7a30-4fc0-a405-dcfbb2bf14b1" />
<img width="350" alt="image" src="https://github.com/user-attachments/assets/a34b8cea-39c9-485b-95ab-3f0c78b73c02" />

---

<img width="350" alt="Screenshot 2025-02-27 at 15 16 42" src="https://github.com/user-attachments/assets/989acc73-145f-45bd-9e61-dc9031da6c0f" />
<img width="350" alt="Screenshot 2025-02-27 at 15 16 47" src="https://github.com/user-attachments/assets/8ef8ad04-857b-4d05-8e4d-b855cabbc7a4" />

---

<img width="350" alt="Screenshot 2025-02-27 at 14 49 07" src="https://github.com/user-attachments/assets/ecec9986-5f70-4aa5-a0a2-e8676fe4ce8e" />
<img width="350" alt="Screenshot 2025-02-27 at 14 49 14" src="https://github.com/user-attachments/assets/067253f3-0687-46d2-baa5-18ccdf29a72c" />

---

- [x] I have considered if this change warrants release notes and have added them to `RELEASE-NOTES.txt` if necessary. Use the "[Internal]" label for non-user-facing changes.

## Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

- [ ] The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
- [ ] Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
- [ ] Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

<!-- Pull request guidelines: https://github.com/woocommerce/woocommerce-android/blob/develop/docs/pull-request-guidelines.md -->


Diff:
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/extensions/ViewExt.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/extensions/ViewExt.kt
index 253a75dff67e..78fb2f55dbc6 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/extensions/ViewExt.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/extensions/ViewExt.kt
@@ -19,16 +19,19 @@ import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.children
 import androidx.core.view.isVisible
 import androidx.core.view.updateLayoutParams
+import androidx.core.view.updatePadding
 import androidx.transition.ChangeBounds
 import androidx.transition.Transition
 import androidx.transition.TransitionListenerAdapter
 import androidx.transition.TransitionManager
+import com.google.android.material.appbar.AppBarLayout
 import kotlinx.coroutines.channels.awaitClose
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.callbackFlow
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.map
+import org.wordpress.android.util.DisplayUtils
 
 const val EXPAND_COLLAPSE_ANIMATION_DURATION_MILLIS = 300L
 
@@ -192,9 +195,25 @@ fun View.edgeToEdgeHandlingForNavigationBar() {
     }
 }
 
-fun View.edgeToEdgeHandlingForNavigationAndStatusBar() {
-    doOnApplyWindowInsets {
-        setPadding(it.left, it.top, it.right, it.bottom)
+fun View.edgeToEdgeForInLandscape() {
+    if (DisplayUtils.isLandscape(context)) {
+        edgeToEdgeHandlingForNavigationBar()
+    }
+}
+
+fun View.edgeToEdgeHandlingForNavigationAndStatusBar(appBarLayout: AppBarLayout? = null) {
+    doOnApplyWindowInsets(consumeInsets = true) { insets ->
+        updatePadding(
+            left = insets.left,
+            right = insets.right,
+            bottom = insets.bottom
+        )
+
+        if (appBarLayout != null) {
+            appBarLayout.updatePadding(top = insets.top)
+        } else {
+            updatePadding(top = insets.top)
+        }
     }
 }
 
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
new file mode 100644
index 000000000000..613e89d0f600
--- /dev/null
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
@@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
+    title: @Composable () -> Unit,
+    backgroundColor: Color,
+    navigationIcon: @Composable (() -> Unit)? = null,
+    actions: @Composable RowScope.() -> Unit = {},
+    elevation: Dp = 0.dp,
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(backgroundColor)
+    ) {
+        TopAppBar(
+            title = title,
+            navigationIcon = navigationIcon,
+            actions = actions,
+            backgroundColor = backgroundColor,
+            elevation = elevation,
+            modifier = modifier.statusBarsPadding()
+        )
+    }
+}
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/customer/CustomerListScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/customer/CustomerListScreen.kt
index 5e37499edc06..9901f7aa0e4c 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/customer/CustomerListScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/customer/CustomerListScreen.kt
@@ -11,9 +11,12 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -140,6 +143,7 @@ private fun CustomerListLoaded(
 
     LazyColumn(
         state = listState,
+        contentPadding = WindowInsets.navigationBars.asPaddingValues(),
     ) {
         itemsIndexed(
             items = body.customers,
@@ -288,7 +292,8 @@ private fun CustomerListError(@StringRes message: Int) {
 private fun CustomerListSkeleton() {
     val numberOfSkeletonRows = 10
     LazyColumn(
-        Modifier.background(color = MaterialTheme.colors.surface)
+        Modifier.background(color = MaterialTheme.colors.surface),
+        contentPadding = WindowInsets.navigationBars.asPaddingValues(),
     ) {
         repeat(numberOfSkeletonRows) {
             item {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt
index 09cd9c5e2a02..2da19ff6d20d 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt
@@ -11,6 +11,7 @@ import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
 import com.woocommerce.android.R
 import com.woocommerce.android.analytics.AnalyticsTracker
+import com.woocommerce.android.extensions.edgeToEdgeForInLandscape
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import com.woocommerce.android.extensions.navigateBackWithResult
 import com.woocommerce.android.extensions.navigateSafely
@@ -45,6 +46,7 @@ class CustomerListDialogFragment : DialogFragment() {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ) = ComposeView(requireContext()).apply {
+        edgeToEdgeForInLandscape()
         setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
         setContent {
             WooThemeWithBackground {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
index 1a2de0b6517e..4ca5c9094fd4 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
@@ -8,7 +8,6 @@ import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
@@ -21,6 +20,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
+import com.woocommerce.android.ui.compose.component.TopAppBarEdgeToEdge
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.customer.CustomerListScreen
 import org.wordpress.android.fluxc.model.customer.WCCustomerModel
@@ -54,7 +54,7 @@ fun OrderCustomerListScreen(
 ) {
     Scaffold(
         topBar = {
-            TopAppBar(
+            TopAppBarEdgeToEdge(
                 title = { Text(stringResource(id = R.string.order_creation_add_customer)) },
                 navigationIcon = {
                     IconButton(onNavigateBack) {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/details/PrintingInstructionsFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/details/PrintingInstructionsFragment.kt
index 97e3b0864899..05d5568930e3 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/details/PrintingInstructionsFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/details/PrintingInstructionsFragment.kt
@@ -3,10 +3,12 @@ package com.woocommerce.android.ui.orders.details
 import android.os.Bundle
 import android.view.View
 import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.navigation.fragment.findNavController
 import com.woocommerce.android.R
 import com.woocommerce.android.databinding.FragmentPrintingInstructionsBinding
+import com.woocommerce.android.extensions.edgeToEdgeHandlingForNavigationAndStatusBar
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import dagger.hilt.android.AndroidEntryPoint
 import org.wordpress.android.util.DisplayUtils
@@ -17,6 +19,7 @@ class PrintingInstructionsFragment : DialogFragment(R.layout.fragment_printing_i
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         val binding = FragmentPrintingInstructionsBinding.bind(view)
+        binding.root.edgeToEdgeHandlingForNavigationAndStatusBar(binding.appBarLayout)
         setupToolbar(binding)
     }
 
@@ -49,6 +52,9 @@ class PrintingInstructionsFragment : DialogFragment(R.layout.fragment_printing_i
                 (DisplayUtils.getWindowPixelHeight(requireContext()) * TABLET_LANDSCAPE_HEIGHT_RATIO).toInt()
             )
         }
+        dialog?.window?.let {
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
     }
 
     companion object {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterCategoriesFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterCategoriesFragment.kt
index 4377c6c5b0c2..0faa9bc46479 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterCategoriesFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterCategoriesFragment.kt
@@ -5,6 +5,7 @@ import android.view.Menu
 import android.view.MenuItem
 import android.view.View
 import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
@@ -12,6 +13,7 @@ import androidx.recyclerview.widget.DividerItemDecoration
 import androidx.recyclerview.widget.LinearLayoutManager
 import com.woocommerce.android.R
 import com.woocommerce.android.databinding.FragmentOrderFilterListBinding
+import com.woocommerce.android.extensions.edgeToEdgeHandlingForNavigationAndStatusBar
 import com.woocommerce.android.extensions.handleResult
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import com.woocommerce.android.extensions.navigateBackWithNotice
@@ -57,6 +59,8 @@ class OrderFilterCategoriesFragment :
         super.onViewCreated(view, savedInstanceState)
 
         _binding = FragmentOrderFilterListBinding.bind(view)
+
+        binding.root.edgeToEdgeHandlingForNavigationAndStatusBar(binding.appBarLayout)
         setupToolbar(binding)
         setUpObservers(viewModel)
 
@@ -103,10 +107,6 @@ class OrderFilterCategoriesFragment :
         }
     }
 
-//    override fun onCreateMenu(menu: Menu, inflater: MenuInflater) {
-//        inflater.inflate(R.menu.menu_clear, menu)
-//    }
-
     fun onPrepareMenu(menu: Menu) {
         updateClearButtonVisibility(menu.findItem(R.id.menu_clear))
     }
@@ -142,6 +142,10 @@ class OrderFilterCategoriesFragment :
                 (DisplayUtils.getWindowPixelHeight(requireContext()) * TABLET_LANDSCAPE_HEIGHT_RATIO).toInt()
             )
         }
+
+        dialog?.window?.let {
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
     }
 
     private fun setUpFiltersRecyclerView(binding: FragmentOrderFilterListBinding) {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterOptionsFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterOptionsFragment.kt
index 8bd5c9e6e9e9..b917d5c00447 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterOptionsFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/filters/OrderFilterOptionsFragment.kt
@@ -3,12 +3,14 @@ package com.woocommerce.android.ui.orders.filters
 import android.os.Bundle
 import android.view.View
 import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.viewModels
 import androidx.recyclerview.widget.DividerItemDecoration
 import androidx.recyclerview.widget.LinearLayoutManager
 import com.woocommerce.android.R
 import com.woocommerce.android.databinding.FragmentOrderFilterListBinding
+import com.woocommerce.android.extensions.edgeToEdgeHandlingForNavigationAndStatusBar
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import com.woocommerce.android.extensions.navigateBackWithNotice
 import com.woocommerce.android.extensions.navigateBackWithResult
@@ -32,7 +34,6 @@ class OrderFilterOptionsFragment :
     private var _binding: FragmentOrderFilterListBinding? = null
     private val binding get() = _binding!!
     private companion object {
-        const val DATE_PICKER_FRAGMENT_TAG = "DateRangePicker"
         const val TABLET_LANDSCAPE_WIDTH_RATIO = 0.55f
         const val TABLET_LANDSCAPE_HEIGHT_RATIO = 0.6f
     }
@@ -55,6 +56,7 @@ class OrderFilterOptionsFragment :
         super.onViewCreated(view, savedInstanceState)
 
         _binding = FragmentOrderFilterListBinding.bind(view)
+        binding.root.edgeToEdgeHandlingForNavigationAndStatusBar(binding.appBarLayout)
         setupToolbar(binding)
         setUpObservers(viewModel)
         setUpFilterOptionsRecyclerView(binding)
@@ -71,6 +73,9 @@ class OrderFilterOptionsFragment :
                 (DisplayUtils.getWindowPixelHeight(requireContext()) * TABLET_LANDSCAPE_HEIGHT_RATIO).toInt()
             )
         }
+        dialog?.window?.let {
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
     }
 
     private fun setupToolbar(binding: FragmentOrderFilterListBinding) {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusFragment.kt
index 04f0f4b956e3..e881aee144e4 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusFragment.kt
@@ -6,10 +6,12 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
 import com.woocommerce.android.R
+import com.woocommerce.android.extensions.edgeToEdgeForInLandscape
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import com.woocommerce.android.extensions.navigateBackWithResult
 import com.woocommerce.android.ui.base.UIMessageResolver
@@ -64,6 +66,8 @@ class UpdateProductStockStatusFragment : DialogFragment() {
                     viewModel.onDoneButtonClicked()
                 }
             )
+        }.apply {
+            edgeToEdgeForInLandscape()
         }
     }
 
@@ -85,10 +89,13 @@ class UpdateProductStockStatusFragment : DialogFragment() {
             else -> PORTRAIT_WIDTH_RATIO to PORTRAIT_HEIGHT_RATIO
         }
 
-        dialog?.window?.setLayout(
-            (width * widthRatio).toInt(),
-            (height * heightRatio).toInt()
-        )
+        dialog?.window?.let {
+            it.setLayout(
+                (width * widthRatio).toInt(),
+                (height * heightRatio).toInt()
+            )
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
     }
 
     private fun setupObservers() {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusScreen.kt
index 769e82507118..4747288eee5e 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/UpdateProductStockStatusScreen.kt
@@ -6,10 +6,14 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Divider
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
@@ -21,9 +25,10 @@ import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
 import com.woocommerce.android.ui.compose.component.ProgressDialog
-import com.woocommerce.android.ui.compose.component.Toolbar
+import com.woocommerce.android.ui.compose.component.TopAppBarEdgeToEdge
 import com.woocommerce.android.ui.compose.component.WcExposedDropDown
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.products.UpdateProductStockStatusViewModel.Companion.AVAILABLE_STOCK_STATUSES
@@ -56,9 +61,17 @@ fun UpdateProductStockStatusScreen(
 
     Scaffold(
         topBar = {
-            Toolbar(
-                title = stringResource(id = R.string.product_update_stock_status_title),
-                onNavigationButtonClick = onNavigationUpClicked,
+            TopAppBarEdgeToEdge(
+                title = { Text(stringResource(id = R.string.product_update_stock_status_title)) },
+                backgroundColor = colorResource(id = R.color.color_toolbar),
+                navigationIcon = {
+                    IconButton(onClick = onNavigationUpClicked) {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
                 actions = {
                     TextButton(onClick = onUpdateClicked) {
                         Text(
@@ -66,7 +79,8 @@ fun UpdateProductStockStatusScreen(
                             color = MaterialTheme.colors.primary
                         )
                     }
-                }
+                },
+                elevation = 0.dp
             )
         },
         backgroundColor = MaterialTheme.colors.surface
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorDialogFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorDialogFragment.kt
index 55e354b5f545..dbaf72fcac40 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorDialogFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorDialogFragment.kt
@@ -6,11 +6,13 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
 import androidx.navigation.fragment.navArgs
 import com.woocommerce.android.R
+import com.woocommerce.android.extensions.edgeToEdgeForInLandscape
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import com.woocommerce.android.extensions.navigateBackWithResult
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
@@ -57,6 +59,7 @@ class ProductSelectorDialogFragment : DialogFragment() {
         return ComposeView(requireContext()).apply {
             id = R.id.product_selector_compose_view
 
+            edgeToEdgeForInLandscape()
             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
 
             setContent {
@@ -81,6 +84,9 @@ class ProductSelectorDialogFragment : DialogFragment() {
                 (DisplayUtils.getWindowPixelHeight(requireContext()) * TABLET_LANDSCAPE_HEIGHT_RATIO).toInt()
             )
         }
+        dialog?.window?.let {
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
     }
 
     @Suppress("UNCHECKED_CAST")
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorScreen.kt
index 77b567f1934b..3b83807ea6ea 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/selector/ProductSelectorScreen.kt
@@ -12,9 +12,11 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
@@ -28,7 +30,6 @@ import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Close
@@ -52,6 +53,7 @@ import com.woocommerce.android.ui.compose.animations.SkeletonView
 import com.woocommerce.android.ui.compose.component.InfiniteListHandler
 import com.woocommerce.android.ui.compose.component.SearchLayoutWithParams
 import com.woocommerce.android.ui.compose.component.SearchLayoutWithParamsState
+import com.woocommerce.android.ui.compose.component.TopAppBarEdgeToEdge
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.component.WCTextButton
 import com.woocommerce.android.ui.products.ProductType.BUNDLE
@@ -77,9 +79,10 @@ fun ProductSelectorScreen(viewModel: ProductSelectorViewModel) {
     val viewState by viewModel.viewState.observeAsState()
     BackHandler(onBack = viewModel::onNavigateBack)
     viewState?.let { state ->
+        val showToolbar = state.selectionMode != SelectionMode.LIVE
         Scaffold(topBar = {
-            if (state.selectionMode != SelectionMode.LIVE) {
-                TopAppBar(
+            if (showToolbar) {
+                TopAppBarEdgeToEdge(
                     title = {
                         Text(
                             text = state.screenTitleOverride
@@ -98,13 +101,20 @@ fun ProductSelectorScreen(viewModel: ProductSelectorViewModel) {
                             )
                         }
                     },
-                    backgroundColor = colorResource(id = color.color_toolbar),
+                    backgroundColor = colorResource(id = R.color.color_toolbar),
                     elevation = 0.dp,
                 )
             }
         }) { padding ->
+            val modifier = if (showToolbar) {
+                Modifier.padding(padding)
+            } else {
+                Modifier
+                    .padding(padding)
+                    .statusBarsPadding()
+            }.navigationBarsPadding()
             ProductSelectorScreen(
-                modifier = Modifier.padding(padding),
+                modifier = modifier,
                 state = state,
                 onDoneButtonClick = viewModel::onDoneButtonClick,
                 onClearButtonClick = viewModel::onClearButtonClick,
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorFragment.kt
index c4b89efd3bce..83b355de3f4f 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorFragment.kt
@@ -6,10 +6,12 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
 import com.woocommerce.android.R
+import com.woocommerce.android.extensions.edgeToEdgeForInLandscape
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.products.variations.selector.VariationSelectorViewModel.ScreenMode
 import com.woocommerce.android.viewmodel.MultiLiveEvent.Event.ExitWithResult
@@ -37,7 +39,7 @@ class VariationSelectorFragment : DialogFragment() {
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
         return ComposeView(requireContext()).apply {
             setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
-
+            edgeToEdgeForInLandscape()
             setContent {
                 WooThemeWithBackground {
                     VariationSelectorScreen(viewModel)
@@ -51,6 +53,14 @@ class VariationSelectorFragment : DialogFragment() {
         setupObservers()
     }
 
+    override fun onStart() {
+        super.onStart()
+
+        dialog?.window?.let {
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
+    }
+
     private fun setupObservers() {
         viewModel.event.observe(viewLifecycleOwner) { event ->
             when (event) {
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorScreen.kt
index 53f094caef10..9fa029f4bc08 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorScreen.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/products/variations/selector/VariationSelectorScreen.kt
@@ -9,9 +9,12 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -26,7 +29,6 @@ import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.runtime.Composable
@@ -46,6 +48,7 @@ import com.woocommerce.android.R.dimen
 import com.woocommerce.android.R.string
 import com.woocommerce.android.ui.compose.animations.SkeletonView
 import com.woocommerce.android.ui.compose.component.InfiniteListHandler
+import com.woocommerce.android.ui.compose.component.TopAppBarEdgeToEdge
 import com.woocommerce.android.ui.compose.component.WCTextButton
 import com.woocommerce.android.ui.products.selector.SelectionState.SELECTED
 import com.woocommerce.android.ui.products.selector.components.SelectorListItem
@@ -61,7 +64,7 @@ fun VariationSelectorScreen(viewModel: VariationSelectorViewModel) {
     BackHandler(onBack = viewModel::onBackPress)
     Scaffold(
         topBar = {
-            TopAppBar(
+            TopAppBarEdgeToEdge(
                 title = {
                     Text(
                         text = viewState.productName
@@ -165,7 +168,8 @@ private fun VariationList(
             state = listState,
             modifier = Modifier
                 .weight(1f)
-                .fillMaxHeight()
+                .fillMaxHeight(),
+            contentPadding = WindowInsets.navigationBars.asPaddingValues(),
         ) {
             itemsIndexed(state.variations) { _, variation ->
                 SelectorListItem(
@@ -213,7 +217,10 @@ private fun VariationList(
 @Suppress("MagicNumber")
 fun VariationListSkeleton() {
     val numberOfInboxSkeletonRows = 10
-    LazyColumn(Modifier.background(color = MaterialTheme.colors.surface)) {
+    LazyColumn(
+        Modifier.background(color = MaterialTheme.colors.surface),
+        contentPadding = WindowInsets.navigationBars.asPaddingValues(),
+    ) {
         repeat(numberOfInboxSkeletonRows) {
             item {
                 Row(
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/whatsnew/FeatureAnnouncementDialogFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/whatsnew/FeatureAnnouncementDialogFragment.kt
index fc5d61b9bb6a..87fb1ff82f8a 100644
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/whatsnew/FeatureAnnouncementDialogFragment.kt
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/whatsnew/FeatureAnnouncementDialogFragment.kt
@@ -5,6 +5,7 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.WindowCompat
 import androidx.fragment.app.DialogFragment
 import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
@@ -42,6 +43,14 @@ class FeatureAnnouncementDialogFragment : DialogFragment() {
         setupObservers()
     }
 
+    override fun onStart() {
+        super.onStart()
+
+        dialog?.window?.let {
+            WindowCompat.setDecorFitsSystemWindows(it, false)
+        }
+    }
+
     private fun setupView(binding: FeatureAnnouncementDialogFragmentBinding) {
         binding.closeFeatureAnnouncementButton.setOnClickListener {
             viewModel.handleAnnouncementIsViewed()
diff --git a/WooCommerce/src/main/res/layout/fragment_order_filter_list.xml b/WooCommerce/src/main/res/layout/fragment_order_filter_list.xml
index 39ac8ad4aa7b..467b55cf246e 100644
--- a/WooCommerce/src/main/res/layout/fragment_order_filter_list.xml
+++ b/WooCommerce/src/main/res/layout/fragment_order_filter_list.xml
@@ -5,24 +5,30 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <com.google.android.material.appbar.MaterialToolbar
-        android:id="@+id/toolbar"
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/app_bar_layout"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/toolbar_height"
-        android:elevation="@dimen/minor_50"
-        app:layout_collapseMode="pin"
-        style="@style/Widget.Woo.Toolbar"
+        android:layout_height="wrap_content"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        tools:title="@string/app_name"/>
+        app:layout_constraintTop_toTopOf="parent">
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/toolbar"
+            style="@style/Widget.Woo.Toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/toolbar_height"
+            android:elevation="@dimen/minor_50"
+            app:layout_collapseMode="pin"
+            tools:title="@string/app_name" />
+    </com.google.android.material.appbar.AppBarLayout>
 
     <View
         android:id="@+id/app_bar_divider"
-        app:layout_constraintTop_toBottomOf="@id/toolbar"
-        app:layout_constraintStart_toStartOf="parent"
+        style="@style/Woo.Divider"
         app:layout_constraintEnd_toEndOf="parent"
-        style="@style/Woo.Divider" />
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/app_bar_layout" />
 
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/filterList"
diff --git a/WooCommerce/src/main/res/layout/fragment_printing_instructions.xml b/WooCommerce/src/main/res/layout/fragment_printing_instructions.xml
index bb56c5db0186..6c56c237efc0 100644
--- a/WooCommerce/src/main/res/layout/fragment_printing_instructions.xml
+++ b/WooCommerce/src/main/res/layout/fragment_printing_instructions.xml
@@ -1,21 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    xmlns:tools="http://schemas.android.com/tools"
     android:orientation="vertical">
 
-    <com.google.android.material.appbar.MaterialToolbar
-        android:id="@+id/toolbar"
+
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/app_bar_layout"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/toolbar_height"
-        app:layout_collapseMode="pin"
-        style="@style/Widget.Woo.Toolbar"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        tools:title="@string/app_name"/>
+        android:layout_height="wrap_content">
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/toolbar"
+            style="@style/Widget.Woo.Toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/toolbar_height"
+            app:layout_collapseMode="pin"
+            tools:title="@string/app_name" />
+    </com.google.android.material.appbar.AppBarLayout>
 
     <ScrollView
         android:layout_width="match_parent"


Reviews:
user: login: github-advanced-security[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-02-27T14:48:29Z
user: login: hichamboushaba
body: Thanks @kidinov for working on this.

I tested it, and there are some issues on Compose screens, we don't apply the correct insets on portrait, the content overlaps with the navigation bar:
<img src=https://github.com/user-attachments/assets/17681acc-8c21-4e42-8bbc-6990a87f3507 width=360 />

I have also some thoughts on the `edgeToEdgeForInLandscape` extension, given it's used only in Compose dialogs, I think a better approach would be to consume the insets in Compose and remove it, that's the approach I [used](https://github.com/woocommerce/woocommerce-android/commit/bdac0a93c5e7e3b5666a9aee02313ee5f28432ca) for login screens (I used `safeDrawing` modifier there but I think `statusBarsPadding()` for the `Toolbar` would be a better choice as you did in this PR), WDYT?

And one additional point: with the current logic, the dialogs won't be edge-to-edge on older APIs, when I worked on the LoginActivity, I [added](https://github.com/woocommerce/woocommerce-android/commit/fcdd48786ac167b385dcda5921bdeeda0c61c243) a call to `enableEdgeToEdge` in the dialogs too, do you think this is something we should do for `MainActivity` too?
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-03T11:41:36Z
user: login: kidinov
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T11:20:27Z
user: login: hichamboushaba
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T12:02:08Z
user: login: kidinov
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T14:52:53Z
user: login: hichamboushaba
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T15:25:49Z
user: login: hichamboushaba
body: Thanks @kidinov for working on this, while I don't agree on some decisions on this PR, they are not blockers, so let's move forward.
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-10T15:34:27Z
user: login: kidinov
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T07:32:08Z
user: login: hichamboushaba
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-11T09:09:10Z

Review comments:
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: github-advanced-security[bot]
body: ## material and material3 are separate, incompatible design system libraries

Using a material import while also using the material3 library

[Show more details](https://github.com/woocommerce/woocommerce-android/security/code-scanning/54892)
created_at: 2025-02-27T14:48:29Z
author_association: NONE
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: hichamboushaba
body: nit, personally I don't think it's a good idea to have multiple components that just add a `Modifier`, we already have a `Toolbar` component that makes sure to [apply](https://github.com/woocommerce/woocommerce-android/blob/11f67d0ed906cc20c5a787c923b8670c4324f38e/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Toolbar.kt#L142) the correct color, and it's used in most Compose screens, so I would suggest to remove this component, and instead:
- Make sure we use `Toolbar` in the dialogs modified in this PR.
- Apply the modifier `statusBarsPadding()` in place.
created_at: 2025-03-03T11:35:46Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: kidinov
body: It's not just a modifier though, it's wrapped in a box to mimic edge-to-edge support with a correct background color that is placed under the status bar. This is not something our `TopAppBar` does and I am not sure if it's a good idea to adjust that component as it is used in many places and we are not sure about the side effects of this. Wdyt?
created_at: 2025-03-10T11:20:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: hichamboushaba
body: > It's not just a modifier though, it's wrapped in a box to mimic edge-to-edge support with a correct background color that is placed under the status bar

Good point, I missed this. The cause of this is that we are not applying the correct background color to the `Scaffold` in those screens, so it uses by default the window background color.

For the login screens, I fixed this by supplying `surface` as the background color, so it would be something like the following patch if we want to apply the same to the customers list screen:

<details>
<summary>
Patch using <b>backgroundColor = MaterialTheme.colors.surface</b>
</summary>

```patch
Index: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt	(revision 43852672ad7b7bf9d7ee6880e74e2c43d0621d17)
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt	(date 1741607453339)
@@ -3,11 +3,11 @@
 package com.woocommerce.android.ui.orders.creation.customerlist
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
@@ -18,9 +18,8 @@
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
-import com.woocommerce.android.ui.compose.component.TopAppBarEdgeToEdge
+import com.woocommerce.android.ui.compose.component.Toolbar
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.customer.CustomerListScreen
 import org.wordpress.android.fluxc.model.customer.WCCustomerModel
@@ -54,23 +53,17 @@
 ) {
     Scaffold(
         topBar = {
-            TopAppBarEdgeToEdge(
-                title = { Text(stringResource(id = R.string.order_creation_add_customer)) },
-                navigationIcon = {
-                    IconButton(onNavigateBack) {
-                        Icon(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = stringResource(id = R.string.back)
-                        )
-                    }
-                },
-                backgroundColor = colorResource(id = R.color.color_toolbar),
-                elevation = 0.dp,
+            Toolbar(
+                title = stringResource(id = R.string.order_creation_add_customer),
+                navigationIcon = Icons.AutoMirrored.Filled.ArrowBack,
+                onNavigationButtonClick = onNavigateBack,
+                modifier = Modifier.statusBarsPadding()
             )
         },
         floatingActionButton = {
             if (state.showFab) CustomerListAddCustomerButton(onAddCustomerClicked)
         },
+        backgroundColor = MaterialTheme.colors.surface,
         modifier = modifier
     ) { padding ->
         CustomerListScreen(
```
</details>

Another option would be to use the option `windowInsets` of the `TopAppBar`, we can update our component to accept it and use it instead of using the modifier `statusBarPadding()`, so something like the following patch:

<details>
<summary> Patch using <b>windowInsets</b> </summary>

```patch
Index: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Toolbar.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Toolbar.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Toolbar.kt
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Toolbar.kt	(revision 43852672ad7b7bf9d7ee6880e74e2c43d0621d17)
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Toolbar.kt	(date 1741607892477)
@@ -1,6 +1,7 @@
 package com.woocommerce.android.ui.compose.component
 
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Text
@@ -27,6 +28,7 @@
     onNavigationButtonClick: (() -> Unit)? = null,
     navigationIcon: ImageVector? = Icons.AutoMirrored.Filled.ArrowBack,
     navigationIconContentDescription: String = stringResource(id = string.back),
+    windowInsets: WindowInsets = ZeroInsets,
     onHelpButtonClick: (() -> Unit)
 ) {
     Toolbar(
@@ -35,6 +37,7 @@
         onNavigationButtonClick = onNavigationButtonClick,
         navigationIcon = navigationIcon,
         navigationIconContentDescription = navigationIconContentDescription,
+        windowInsets = windowInsets,
         actionButtonIcon = ImageVector.vectorResource(id = drawable.ic_help_24dp),
         onActionButtonClick = onHelpButtonClick,
         actionIconContentDescription = stringResource(id = string.help)
@@ -47,7 +50,8 @@
     title: String = "",
     onNavigationButtonClick: (() -> Unit),
     navigationIcon: ImageVector = Icons.AutoMirrored.Filled.ArrowBack,
-    navigationIconContentDescription: String = stringResource(id = string.back)
+    navigationIconContentDescription: String = stringResource(id = string.back),
+    windowInsets: WindowInsets = ZeroInsets
 ) {
     Toolbar(
         modifier = modifier,
@@ -55,6 +59,7 @@
         onNavigationButtonClick = onNavigationButtonClick,
         navigationIcon = navigationIcon,
         navigationIconContentDescription = navigationIconContentDescription,
+        windowInsets = windowInsets
     )
 }
 
@@ -65,6 +70,7 @@
     onNavigationButtonClick: (() -> Unit)? = null,
     navigationIcon: ImageVector? = Icons.AutoMirrored.Filled.ArrowBack,
     navigationIconContentDescription: String = stringResource(id = string.back),
+    windowInsets: WindowInsets = ZeroInsets,
     actionButtonIcon: ImageVector,
     onActionButtonClick: (() -> Unit),
     actionIconContentDescription: String
@@ -75,6 +81,7 @@
         onNavigationButtonClick = onNavigationButtonClick,
         navigationIcon = navigationIcon,
         navigationIconContentDescription = navigationIconContentDescription,
+        windowInsets = windowInsets,
         actions = {
             IconButton(onClick = onActionButtonClick) {
                 Icon(
@@ -93,6 +100,7 @@
     onNavigationButtonClick: (() -> Unit)? = null,
     navigationIcon: ImageVector? = Icons.AutoMirrored.Filled.ArrowBack,
     navigationIconContentDescription: String = stringResource(id = string.back),
+    windowInsets: WindowInsets = ZeroInsets,
     actions: @Composable RowScope.() -> Unit = {}
 ) {
     Toolbar(
@@ -101,6 +109,7 @@
         onNavigationButtonClick = onNavigationButtonClick,
         navigationIcon = navigationIcon,
         navigationIconContentDescription = navigationIconContentDescription,
+        windowInsets = windowInsets,
         actions = actions
     )
 }
@@ -112,6 +121,7 @@
     onNavigationButtonClick: (() -> Unit)? = null,
     navigationIcon: ImageVector? = Icons.AutoMirrored.Filled.ArrowBack,
     navigationIconContentDescription: String = stringResource(id = string.back),
+    windowInsets: WindowInsets = ZeroInsets,
     onActionButtonClick: (() -> Unit),
     actionButtonText: String
 ) {
@@ -121,6 +131,7 @@
         onNavigationButtonClick = onNavigationButtonClick,
         navigationIcon = navigationIcon,
         navigationIconContentDescription = navigationIconContentDescription,
+        windowInsets = windowInsets,
         actions = {
             TextButton(onClick = onActionButtonClick) {
                 Text(text = actionButtonText)
@@ -136,6 +147,7 @@
     onNavigationButtonClick: (() -> Unit)? = null,
     navigationIcon: ImageVector? = null,
     navigationIconContentDescription: String = stringResource(id = string.back),
+    windowInsets: WindowInsets = ZeroInsets,
     actions: @Composable RowScope.() -> Unit = {}
 ) {
     TopAppBar(
@@ -157,8 +169,11 @@
                 }
             }
         },
+        windowInsets = windowInsets,
         actions = actions,
         elevation = 0.dp,
         modifier = modifier
     )
 }
+
+private val ZeroInsets = WindowInsets(0)
Index: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt	(revision 43852672ad7b7bf9d7ee6880e74e2c43d0621d17)
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/OrderCustomerListScreen.kt	(date 1741607921649)
@@ -2,12 +2,12 @@
 
 package com.woocommerce.android.ui.orders.creation.customerlist
 
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
 import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
@@ -18,9 +18,8 @@
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
-import com.woocommerce.android.ui.compose.component.TopAppBarEdgeToEdge
+import com.woocommerce.android.ui.compose.component.Toolbar
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.customer.CustomerListScreen
 import org.wordpress.android.fluxc.model.customer.WCCustomerModel
@@ -54,18 +53,11 @@
 ) {
     Scaffold(
         topBar = {
-            TopAppBarEdgeToEdge(
-                title = { Text(stringResource(id = R.string.order_creation_add_customer)) },
-                navigationIcon = {
-                    IconButton(onNavigateBack) {
-                        Icon(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = stringResource(id = R.string.back)
-                        )
-                    }
-                },
-                backgroundColor = colorResource(id = R.color.color_toolbar),
-                elevation = 0.dp,
+            Toolbar(
+                title = stringResource(id = R.string.order_creation_add_customer),
+                navigationIcon = Icons.AutoMirrored.Filled.ArrowBack,
+                onNavigationButtonClick = onNavigateBack,
+                windowInsets = WindowInsets.statusBars
             )
         },
         floatingActionButton = {
```

</details>

WDYT about this? My concern with the `TopAppBarEdgeToEdge` is that with multiple components doing the same thing, it can lead to inconsistencies in the future, but I leave it to you to decide if you prefer it.
created_at: 2025-03-10T12:02:08Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: kidinov
body: > For the login screens, I fixed this by supplying surface as the background color, so it would be something like the following patch if we want to apply the same to the customers list screen:

Those are different colors, so it's not e2e as the toolbar top padding is not the same color as the toolbar itself, right?

> WDYT about this? My concern with the TopAppBarEdgeToEdge is that with multiple components doing the same thing, it can lead to inconsistencies in the future, but I leave it to you to decide if you prefer it.

Overal I think the approach with the component is good.

And I don't think that they are doing the same thing, it's like Button and OutlinedButton doing the same thing, which they are but they are visually different, therefore different components

In general, we'll need to replace this component with a toolbar from material 3 and it should visually look the same. It'll be easier to find where it should be replaced to as this component clearly points it out
created_at: 2025-03-10T14:52:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: hichamboushaba
body: > Those are different colors, so it's not e2e as the toolbar top padding is not the same color as the toolbar itself, right?

Yes, good point, but you are also using `surface` in this PR, it should be updated to `color_tooblar`.

> And I don't think that they are doing the same thing, it's like Button and OutlinedButton doing the same thing, which they are but they are visually different, therefore different components

TBH I don't agree, here we are just applying a padding, and as I showed, passing the `windowInsets` argument can fix the issue without needing the new component.

But let's agree to disagree here 🙂 
created_at: 2025-03-10T15:25:48Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: kidinov
body: @hichamboushaba 👋

> Yes, good point, but you are also using surface in this PR, it should be updated to color_tooblar.

Could you please point me out the place, so I can fix that?
created_at: 2025-03-11T07:32:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,38 @@
+package com.woocommerce.android.ui.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopAppBarEdgeToEdge(
path: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/TopAppBarEdgeToEdge.kt
user: login: hichamboushaba
body: Yes, sorry about that, I see the `color_toolbar` is applied in all instances, I stand corrected.
created_at: 2025-03-11T09:09:10Z
author_association: MEMBER

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-02-27T14:27:01Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Auto reviews are disabled on this repository.
> 
> Please check the settings in the CodeRabbit UI or the `.coderabbit.yaml` file in this repository. To trigger a single review, invoke the `@coderabbitai review` command.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: wpmobilebot
created_at: 2025-02-27T14:31:43Z
body: <!-- REUSE_ID: WooCommerce-Wear-prototype-build-link -->

<details><summary>📲 You can test the changes from this Pull Request in <b>WooCommerce-Wear Android</b> by scanning the QR code below to install the corresponding build.</summary>
<table>
<tr>
  <td rowspan='6' width='260px'><img src='https://api.qrserver.com/v1/create-qr-code/?size=500x500&qzone=4&data=https%3A%2F%2Fcdn.a8c-ci.services%2F70ad533e752cbd4dcd515ed6cfb9f823d6f9f819%2Fwoocommerce-wear-prototype-build-pr13638-4385267.apk' width='250' height='250' /></td>
  <td><b>App Name</b></td><td> WooCommerce-Wear Android</td>
</tr>
<tr><td><b>Platform</b></td><td>⌚️ Wear OS</td></tr>
<tr><td><b>Flavor</b></td><td>Jalapeno</td></tr>
<tr><td><b>Build Type</b></td><td>Debug</td></tr>
<tr><td><b>Commit</b></td><td>43852672ad7b7bf9d7ee6880e74e2c43d0621d17</td></tr>
<tr><td><b>Direct Download</b></td><td><a href='https://cdn.a8c-ci.services/70ad533e752cbd4dcd515ed6cfb9f823d6f9f819/woocommerce-wear-prototype-build-pr13638-4385267.apk'><code>woocommerce-wear-prototype-build-pr13638-4385267.apk</code></a></td></tr>
</table>

</details>

author_association: COLLABORATOR
user: login: wpmobilebot
created_at: 2025-02-27T14:46:47Z
body: <!-- REUSE_ID: WooCommerce-prototype-build-link -->

<p>📲 You can test the changes from this Pull Request in <b>WooCommerce Android</b> by scanning the QR code below to install the corresponding build.</p>
<table>
<tr>
  <td rowspan='6' width='260px'><img src='https://api.qrserver.com/v1/create-qr-code/?size=500x500&qzone=4&data=https%3A%2F%2Fcdn.a8c-ci.services%2Fa8b6e90d9d969f1b573b3c0dd090796761ee106e%2Fwoocommerce-prototype-build-pr13638-4385267.apk' width='250' height='250' /></td>
  <td><b>App Name</b></td><td> WooCommerce Android</td>
</tr>
<tr><td><b>Platform</b></td><td>📱 Mobile</td></tr>
<tr><td><b>Flavor</b></td><td>Jalapeno</td></tr>
<tr><td><b>Build Type</b></td><td>Debug</td></tr>
<tr><td><b>Commit</b></td><td>43852672ad7b7bf9d7ee6880e74e2c43d0621d17</td></tr>
<tr><td><b>Direct Download</b></td><td><a href='https://cdn.a8c-ci.services/a8b6e90d9d969f1b573b3c0dd090796761ee106e/woocommerce-prototype-build-pr13638-4385267.apk'><code>woocommerce-prototype-build-pr13638-4385267.apk</code></a></td></tr>
</table>


author_association: COLLABORATOR
user: login: codecov-commenter
created_at: 2025-02-28T08:59:01Z
body: ## [Codecov](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) Report
Attention: Patch coverage is `0%` with `23 lines` in your changes missing coverage. Please review.
> Project coverage is 37.99%. Comparing base [(`548e2b3`)](https://app.codecov.io/gh/woocommerce/woocommerce-android/commit/548e2b32bbdfe0bcf985556a99fc1846df5e51c8?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) to head [(`4385267`)](https://app.codecov.io/gh/woocommerce/woocommerce-android/commit/43852672ad7b7bf9d7ee6880e74e2c43d0621d17?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce).
> Report is 17 commits behind head on 13270-android-sdk-update-target-sdk-to-35.

| [Files with missing lines](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | Patch % | Lines |
|---|---|---|
| [...ndroid/ui/compose/component/TopAppBarEdgeToEdge.kt](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?src=pr&el=tree&filepath=WooCommerce%2Fsrc%2Fmain%2Fkotlin%2Fcom%2Fwoocommerce%2Fandroid%2Fui%2Fcompose%2Fcomponent%2FTopAppBarEdgeToEdge.kt&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-V29vQ29tbWVyY2Uvc3JjL21haW4va290bGluL2NvbS93b29jb21tZXJjZS9hbmRyb2lkL3VpL2NvbXBvc2UvY29tcG9uZW50L1RvcEFwcEJhckVkZ2VUb0VkZ2Uua3Q=) | 0.00% | [18 Missing :warning: ](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) |
| [...tlin/com/woocommerce/android/extensions/ViewExt.kt](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?src=pr&el=tree&filepath=WooCommerce%2Fsrc%2Fmain%2Fkotlin%2Fcom%2Fwoocommerce%2Fandroid%2Fextensions%2FViewExt.kt&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-V29vQ29tbWVyY2Uvc3JjL21haW4va290bGluL2NvbS93b29jb21tZXJjZS9hbmRyb2lkL2V4dGVuc2lvbnMvVmlld0V4dC5rdA==) | 0.00% | [5 Missing :warning: ](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) |

<details><summary>Additional details and impacted files</summary>


```diff
@@                               Coverage Diff                               @@
##             13270-android-sdk-update-target-sdk-to-35   #13638      +/-   ##
===============================================================================
- Coverage                                        37.99%   37.99%   -0.01%     
  Complexity                                        9131     9131              
===============================================================================
  Files                                             2068     2069       +1     
  Lines                                           113657   113679      +22     
  Branches                                         14417    14423       +6     
===============================================================================
  Hits                                             43189    43189              
- Misses                                           66546    66568      +22     
  Partials                                          3922     3922              
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/woocommerce/woocommerce-android/pull/13638?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce).

<details><summary>🚀 New features to boost your workflow: </summary>

- ❄ [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
</details>
author_association: NONE
user: login: kidinov
created_at: 2025-03-10T11:17:01Z
body: @hichamboushaba  👋

> I tested it, and there are some issues on Compose screens, we don't apply the correct insets on portrait, and the content overlaps with the navigation bar:

My understanding that's the whole idea behind edge-to-edge is that the content should be placed under system UI including navigation, therefore where it's relatively easy to do I implemented it properly.

> Once you target SDK 35 or higher on a device running Android 15 or higher, your app is displayed edge-to-edge. The window spans the entire width and height of the display by drawing behind the **system bars. System bars include the status bar, caption bar, and navigation bar.**

https://developer.android.com/develop/ui/views/layout/edge-to-edge

> I have also some thoughts on the edgeToEdgeForInLandscape extension, given it's used only in Compose dialogs, I think a better approach would be to consume the insets in Compose and remove it, that's the approach I [used](https://github.com/woocommerce/woocommerce-android/commit/bdac0a93c5e7e3b5666a9aee02313ee5f28432ca) for login screens (I used safeDrawing modifier there but I think statusBarsPadding() for the Toolbar would be a better choice as you did in this PR), WDYT?

Could you please elaborate on this more? Do you mean just put `statusBarsPadding` and on what element exactly? If you have a code snippet would be great!

> And one additional point: with the current logic, the dialogs won't be edge-to-edge on older APIs, when I worked on the LoginActivity, I [added](https://github.com/woocommerce/woocommerce-android/commit/fcdd48786ac167b385dcda5921bdeeda0c61c243) a call to enableEdgeToEdge in the dialogs too, do you think this is something we should do for MainActivity too?

Good call! Done here

43852672ad7b7bf9d7ee6880e74e2c43d0621d17



author_association: CONTRIBUTOR
user: login: hichamboushaba
created_at: 2025-03-10T12:18:14Z
body: > My understanding that's the whole idea behind edge-to-edge is that the content should be placed under system UI including navigation, therefore where it's relatively easy to do I implemented it properly.

Good point, but I'm not sure this is really required, at least to my eyes it looks weird to have the content below the navigation bars.
And for Google, it seems their apps are not using this, for example this is Youtube:

<img src=https://github.com/user-attachments/assets/f21a2dec-254e-4ac9-a612-555b3cc91fed width=360 />

Another point here, we don't apply this anywhere else in the app (I mean the Fragments), so applying it just to the Dialog Fragments would lead to an inconsistent experience, like the below example of the same screen when used as dialog and as a fragment:

| Dialog | Fragment |
| --- | --- |
| ![Screenshot_20250310_120858](https://github.com/user-attachments/assets/7fe57db8-46d1-4d76-8bb5-80ab3aba5260) | ![Screenshot_20250310_120910](https://github.com/user-attachments/assets/c9550244-3cb1-475d-8de5-0e229d0df1e3) |

**WDYT**?

--------

> Could you please elaborate on this more? Do you mean just put statusBarsPadding and on what element exactly? If you have a code snippet would be great!

This patch shows what I mean:

<details>
<summary> Patch </summary>

```patch
Index: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt	(revision 43852672ad7b7bf9d7ee6880e74e2c43d0621d17)
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/customerlist/CustomerListDialogFragment.kt	(date 1741608823823)
@@ -11,7 +11,6 @@
 import androidx.navigation.fragment.findNavController
 import com.woocommerce.android.R
 import com.woocommerce.android.analytics.AnalyticsTracker
-import com.woocommerce.android.extensions.edgeToEdgeForInLandscape
 import com.woocommerce.android.extensions.isTwoPanesShouldBeUsed
 import com.woocommerce.android.extensions.navigateBackWithResult
 import com.woocommerce.android.extensions.navigateSafely
@@ -46,7 +45,6 @@
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ) = ComposeView(requireContext()).apply {
-        edgeToEdgeForInLandscape()
         setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
         setContent {
             WooThemeWithBackground {
```

</details>

This patch uses `contentWindowInsets = WindowInsets.statusBars` to keep the same behavior of overlapping with the navigation bar, we can change it to `contentWindowInsets = WindowInsets.safeDrawing` if we want the content to not overlap with it.
author_association: MEMBER
user: login: kidinov
created_at: 2025-03-10T14:32:11Z
body: > Good point, but I'm not sure this is really required, at least to my eyes it looks weird to have the content below the navigation bars.

I mean that's what the feature is about, and if we just ignore it, kinda not clear why we even do that, if we could just disable edge-to-edge for the whole app passing the flag in the XML

> And for Google, it seems their apps are not using this, for example this is Youtube:

Not sure if this means anything - they just haven't implemented it yet as this tones of work. I checked other apps - some implemented this already, some not

> Another point here, we don't apply this anywhere else in the app (I mean the Fragments), so applying it just to the Dialog Fragments would lead to an inconsistent experience, like the below example of the same screen when used as dialog and as a fragment:

There is no way we would implement this in one go on all the screens, so the iterative approach will be going on while we will be migrating to material 3 components and the edge 2 edge will be handled by them automatically

We don't apply this only to dialog fragments, I, and I beleave other folks who worked on this project, where it was easy to implement e2e support correctly

<img width="369" alt="image" src="https://github.com/user-attachments/assets/e388d87a-b014-4b74-963a-24d8cc8e7e80" />
<img width="367" alt="image" src="https://github.com/user-attachments/assets/29eed531-4cad-424f-96c2-e15b423315c1" />


> This patch uses contentWindowInsets = WindowInsets.statusBars to keep the same behavior of overlapping with the navigation bar, we can change it to contentWindowInsets = WindowInsets.safeDrawing if we want the content to not overlap with it.

Thanks! The patch I think misses another file but I guess I understood what you mean. Is my understanding correct and that breaks the e2e on the portrait when there is a cut out on the screen?
author_association: CONTRIBUTOR
user: login: hichamboushaba
created_at: 2025-03-10T15:32:33Z
body: > I mean that's what the feature is about, and if we just ignore it, kinda not clear why we even do that, if we could just disable edge-to-edge for the whole app passing the flag in the XML

This is a subjective point, for me, the edge-to-edge depend on each application, the main point of the edge-to-edge to me to is to make the app feel like it's expanding to all the edges, and this is mainly about the background (whether it's a color or an image), and some other components that don't need user interaction in those areas (for example a Map), but to have text or buttons overlap with the navigation bar just looks weird to my eye.

> Not sure if this means anything - they just haven't implemented it yet as this tones of work.

I've checked, the app targets API 35, so I guess that's how they want it to look (but no way to confirm this 😄)

> There is no way we would implement this in one go on all the screens, so the iterative approach will be going on while we will be migrating to material 3 components and the edge 2 edge will be handled by them automatically

Just sharing a point here, migrating to material 3 won't handle this automatically, we handle the insets in the root layout of our activities, so there is no way to apply this to individual screens without big changes to the whole layout at the same time.

> Thanks! The patch I think misses another file but I guess I understood what you mean

Yes, that's my point, I just shared one example.

> Is my understanding correct and that breaks the e2e on the portrait when there is a cut out on the screen?

I'm not aware of this, can you share a screenshot?
author_association: MEMBER
user: login: kidinov
created_at: 2025-03-11T07:41:42Z
body: @hichamboushaba 

Thank you for all the nice comments! I will merge the PR for now, as I didn't find where the surface color is used(visually) as part of the toolbar. However, if you point it out, I'll fix it in another PR.

In the end, we will still have a round of testing, allowing many conversations here to be validated as well!
author_association: CONTRIBUTOR