[Orders] UI improvements for small tablets

[samiuelson]

Fix support for large font scale size on small tablets

WOOMOB-537

Description

This PR adds a couple of improvements for Orders screen on small tablets, especially with increased size of font and increased pixel density:

1. Ellipsizing texts
2. Shrinking horizontal margins (only on small tablets in portrait)
3. Optimizing widths ration of Orders | Order Details screen

Steps to reproduce

Testing information

Check if you can reproduce any UI glitches with accessibility size settings (screen size, font size).

The tests that have been performed

Tested Orders | Order details screen on different devices and configurations:

1. Small tablet (10.2" 1280x800px)
2. Medium tablet (10.9" 1440x2304px)
3. Increased screen size (AS –> Running Devices –> Device UI Shortcuts)
4. Increased font size (AS –> Running Devices –> Device UI Shortcuts)

Results below.

Images/gif

• Small tablet with increased screen size scale and font size scale in accessibility settings
  
• Small tablet with very increased screen size scale and font size scale in accessibility settings
  
• Normal tablet landscape – bigger margins in details pane
  
• Normal tablet portrait - smaller margins in details pane
  

• 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.

[wpmobilebot]

📲 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	dc183a9
	Direct Download	woocommerce-wear-prototype-build-pr14152-dc183a9.apk

[wpmobilebot]

📲 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	dc183a9
	Direct Download	woocommerce-prototype-build-pr14152-dc183a9.apk

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.

Project coverage is 37.78%. Comparing base (d49fb2d) to head (dc183a9).
Report is 17 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...n/com/woocommerce/android/extensions/ContextExt.kt	0.00%	5 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #14152      +/-   ##
============================================
- Coverage     37.78%   37.78%   -0.01%     
- Complexity     8945     8946       +1     
============================================
  Files          1956     1956              
  Lines        109561   109566       +5     
  Branches      14385    14387       +2     
============================================
+ Hits          41396    41397       +1     
- Misses        64388    64393       +5     
+ Partials       3777     3776       -1     

☔ 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]

I believe we should use something like 16dp in this instance; otherwise, it may not adhere to the 4dp grid guideline and become noticeable as this is small padding

[samiuelson]

Makes sense. Set to fixed 16dp: f2a761d

[kidinov]

While it's name "landscape" it's actually set 0.4 to both Portrait and landscape orientations. So:

• Maybe name it properly
• It feels that 0.3 is better for landscape, but 0.4 for portrait

[kidinov]

Yeah, it looks odd now in landscape on big tablets

[samiuelson]

Switched to .4 in portrait and .3 in landscape: a3d096f

[kidinov]

LGTM! I left a couple of suggestions please take a look

Also, I'll leave this up to you, but now, in some cases we show 2 panes in portrait and 1 pane in landscape, which is odd

06-09--11-57.mp4

[samiuelson]

Thanks for review, @kidinov.

Also, I'll leave this up to you, but now, in some cases we show 2 panes in portrait and 1 pane in landscape, which is odd

Good catch. Since this is a separate bug, and may require some more tests and discussion, I raised a separate PR with the fix: #14160. You can take a look.

[kidinov]

@samiuelson I get this on a small tablet now (notice large paddings)

[samiuelson]

@samiuelson I get this on a small tablet now (notice large padding)

👋 @kidinov, I can't reproduce such large margins on a similar configuration.

Could you check the actual dp size of the screen, for example, by measuring the dp size of the root container using the layout inspector in AS? It's the dp value of the shorter dimension that is being classified in Context.windowWidthSizeClass.

I suspect your device has larger dp screen width class than MEDIUM_SCREEN_MAX_WIDTH and that's why it shows larger margins.

[kidinov]

@samiuelson

[kidinov]

@samiuelson 👋

I just realised that I tested it on the products screen, not orders. Sorry about that. We'd need to implement this on the products though, otherwise it looks inconsistent.

[dangermattic]

	1 Warning
⚠️	This PR is assigned to the milestone 22.6. This milestone is due in less than 2 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger