[Woo POS] Fix status bar height handling in Orders Loading and Order Details screen #15023

samiuelson · 2025-11-26T16:39:23Z

Description

This pull request fixes status bar height handling in the WooCommerce POS Orders Loading and Order Details screens by applying proper status bar padding to ensure UI elements are not obscured by the system status bar.

Renamed WooPosOrdersLoadingState to WooPosOrdersLoadingScreen for consistency
Applied statusBarsPadding() modifier to both loading and detail screens to account for status bar height
Adjusted padding and alignment in order detail views to maintain proper spacing with the new status bar handling

Test Steps

Verify POS Orders Loading and Content state have correct UI.

Images/gif

Loading

before	after

Content

before	after

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.

- Add statusBarsPadding to the root Row to respect system windows. - Remove top padding from WooPosOrderDetailsLoadingPane modifier. - Update padding in WooPosOrderDetailsLoadingPane to be horizontal-only. - Add a Spacer and vertical padding for better visual alignment in the details pane.

… height - Add `statusBarsPadding()` to the main column modifier to prevent overlap with system bars. - Set a minimum height for the toolbar row using `WOO_POS_ORDERS_TOOLBAR_HEIGHT`. - Align toolbar content vertically to the center.

Copilot

Pull request overview

This pull request fixes status bar height handling in the WooCommerce POS Orders Loading and Order Details screens by applying proper status bar padding to ensure UI elements are not obscured by the system status bar.

Renamed WooPosOrdersLoadingState to WooPosOrdersLoadingScreen for consistency
Applied statusBarsPadding() modifier to both loading and detail screens to account for status bar height
Adjusted padding and alignment in order detail views to maintain proper spacing with the new status bar handling

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
WooPosOrdersScreen.kt	Updated function call to use renamed `WooPosOrdersLoadingScreen()`
WooPosOrdersLoadingScreen.kt	Added status bar padding to main layout, adjusted internal padding to horizontal-only, and refined spacing in detail pane
WooPosOrdersDetails.kt	Added status bar padding to scrollable column and set minimum height for header row to match toolbar height

Comments suppressed due to low confidence (1)

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersLoadingScreen.kt:169

The padding modifier is applied after clip, which means it will reduce the shimmer box size rather than add spacing around it. The modifiers should be reordered if you want to add spacing:

.clip(RoundedCornerShape(WooPosCornerRadius.Small.value))

Remove the .padding(vertical = WooPosSpacing.Small.value) line or move it before .clip() if padding is needed.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

wpmobilebot · 2025-11-26T16:46:46Z

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`92be6f7`
	Direct Download	`woocommerce-wear-prototype-build-pr15023-92be6f7.apk`

samiuelson · 2025-11-26T17:03:52Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersLoadingState.kt

 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography

 @Composable
-fun WooPosOrdersLoadingState() {


WooPosOrdersLoadingState was a bit misleading, because it fits more of a name for a UI state model.

@samueljseay

Screen is also misleading, as this is not a screen but one of the "states" (loading) of the OrdersScreen

wpmobilebot · 2025-11-26T17:04:19Z

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`92be6f7`
	Direct Download	`woocommerce-prototype-build-pr15023-92be6f7.apk`

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersLoadingScreen.kt:169

The .padding(vertical = WooPosSpacing.Small.value) modifier is applied after .clip(). In Compose, modifier order matters - padding applied after clipping won't be clipped and may not produce the intended visual effect. Consider moving the padding before the clip modifier if the padding should be part of the clipped area, or verify this ordering is intentional.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersDetails.kt

codecov-commenter · 2025-11-26T17:53:23Z

Codecov Report

❌ Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.59%. Comparing base (4e73eaa) to head (92be6f7).
⚠️ Report is 61 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...ce/android/ui/woopos/orders/WooPosOrdersDetails.kt	0.00%	4 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #15023      +/-   ##
============================================
+ Coverage     38.54%   38.59%   +0.05%     
+ Complexity    10293    10292       -1     
============================================
  Files          2161     2160       -1     
  Lines        122680   122502     -178     
  Branches      16910    16887      -23     
============================================
- Hits          47287    47284       -3     
+ Misses        70593    70418     -175     
  Partials       4800     4800

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

kidinov · 2025-11-27T07:36:14Z

...mmerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersLoadingScreen.kt

+    Row(
+        modifier = Modifier
+            .fillMaxSize()
+            .statusBarsPadding()


Shell we have it on the top level WooPosOrdersScreen? Why only 2 states not the rest then?

kidinov

@samiuelson I think it's not the best handling of this.

Empty and error states not handled
Loading state has the layout broken - notice the "list" part has padding at the top when loading.

…ove redundant paddings Refactor the layout structure in WooPosOrdersScreen to apply `statusBarsPadding()` at the root Box level instead of on individual child components like the search bar. Remove redundant `statusBarsPadding` and adjust padding values in `WooPosOrdersDetails` and `WooPosOrdersLoadingScreen` to align with this change.

samiuelson · 2025-11-27T13:12:55Z

@samiuelson I think it's not the best handling of this.

Empty and error states not handled

Loading state has the layout broken - notice the "list" part has padding at the top when loading.

Thanks for the review and suggestions, @kidinov. I applied padding to the root Box and updated the paddings in the children. Take a look:

Empty state

Loading

Content

kidinov

@samiuelson

Now the issue I mentioned in the previous review both on the content and loading states

- Remove global `statusBarsPadding` from the root `WooPosOrdersScreen` container. - Apply `statusBarsPadding` individually to `OrdersContent`, `OrdersEmpty`, `OrdersError`, and `WooPosToolbar`. - Add `statusBarsPadding` to `WooPosOrdersDetails`. - Refactor `WooPosOrdersLoadingScreen` layout to correctly handle status bar insets and toolbar spacing.

samiuelson · 2025-11-27T17:20:15Z

@samiuelson

Now the issue I mentioned in the previous review both on the content and loading states

Ah, I didn't realize you meant the backgrounds of the panes are not shown behind the status bar, and I didn't notice that either. To accomplish that, we can't use a single padding at the root Box element, but we need to adjust the paddings in all the children. This is fixed in: 92be6f7

wpmobilebot · 2025-11-28T11:50:52Z

Version 23.8 has now entered code-freeze, so the milestone of this PR has been updated to 23.9.

samiuelson added 3 commits November 26, 2025 17:16

Rename WooPosOrdersLoadingState to WooPosOrdersLoadingScreen

bc88530

samiuelson requested a review from Copilot November 26, 2025 16:39

Copilot started reviewing on behalf of samiuelson November 26, 2025 16:40 View session

Copilot finished reviewing on behalf of samiuelson November 26, 2025 16:42

Copilot AI reviewed Nov 26, 2025

View reviewed changes

samiuelson requested a review from Copilot November 26, 2025 17:02

samiuelson commented Nov 26, 2025

View reviewed changes

Copilot started reviewing on behalf of samiuelson November 26, 2025 17:03 View session

samiuelson marked this pull request as ready for review November 26, 2025 17:04

samiuelson requested a review from kidinov November 26, 2025 17:04

Copilot finished reviewing on behalf of samiuelson November 26, 2025 17:05

samiuelson added the Bug label Nov 26, 2025

samiuelson added this to the 23.8 milestone Nov 26, 2025

Copilot AI reviewed Nov 26, 2025

View reviewed changes

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersDetails.kt Outdated Show resolved Hide resolved

Satisfy detekt's complaints

11b9108

kidinov reviewed Nov 27, 2025

View reviewed changes

kidinov self-requested a review November 27, 2025 07:41

kidinov reviewed Nov 27, 2025

View reviewed changes

samiuelson requested a review from kidinov November 27, 2025 13:13

kidinov requested changes Nov 27, 2025

View reviewed changes

samiuelson requested a review from kidinov November 27, 2025 17:20

wpmobilebot modified the milestones: 23.8, 23.9 Nov 28, 2025

[Woo POS] Fix status bar height handling in Orders Loading and Order Details screen #15023

Are you sure you want to change the base?

[Woo POS] Fix status bar height handling in Orders Loading and Order Details screen #15023

Conversation

samiuelson commented Nov 26, 2025 • edited by kidinov Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test Steps

Images/gif

Loading

Content

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

wpmobilebot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samiuelson Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

kidinov Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

codecov-commenter commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

kidinov Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

kidinov left a comment

Choose a reason for hiding this comment

Uh oh!

samiuelson commented Nov 27, 2025

Uh oh!

kidinov left a comment

Choose a reason for hiding this comment

Uh oh!

samiuelson commented Nov 27, 2025

Uh oh!

wpmobilebot commented Nov 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

samiuelson commented Nov 26, 2025 •

edited by kidinov

Loading

wpmobilebot commented Nov 26, 2025 •

edited

Loading

wpmobilebot commented Nov 26, 2025 •

edited

Loading

codecov-commenter commented Nov 26, 2025 •

edited

Loading