Dashboard: Display contents in 2 columns for large screens

[itsmeichigo]

Closes: #13988

Description

This PR updates the layout of the dashboard screen to display contents in 2 columns to make use of the real estate on large devices.

Changes:

• Moved the logic for in-app feedback, share store, and new card notice cards to the view model by treating them as new dashboard card types.
• Display contents in two columns for regular horizontal size class (if there is more than 1 card) and one column for compact mode.
• Fixed layout issue with Google Ads card.

Steps to reproduce

• Log in to a test store on an iPad (physical device or simulator).
• Try enabling/disabling cards on the dashboard screen and confirm that the cards are displayed in two columns if there are more than 1 items.
• Repeat the steps on an iPhone and confirm that cards are displayed in a single column on small device width and 2 columns for large width (e.g. iPhone pro max in landscape mode).

Smoke testing is needed for the update logic of in-app feedback, share store, and new cards notice cards:

• In-app feedback: testing steps can be found here.
• Share store: ensure that the card is displayed only when the store has no orders.
• New cards notice: ensure that the card is displayed only on a fresh install/update without ever opening the Edit card screen.

Testing information

Tested on simulator iPad 10 Gen and iPhone 15 Pro iOS 17.4 & 18.1 beta:

• Confirmed that cards are displayed in 1 column in smaller screen sizes and 2 columns on iPad & iPhone 15 Pro Max landscape mode.
• Confirmed that the Google Ads card is not stretched in the 2-column layout.
• Confirmed that the share store card is displayed correctly in both layouts.
• Confirmed that the new card notice card is displayed correctly in both layouts.
• Confirmed that in-app feedback is displayed correctly in both layouts

Screenshots

Before	After

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

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 all devices (phone/tablet) and no regressions are added.

[wpmobilebot]

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

	App Name	WooCommerce iOS
	Build Number	pr13983-a1608da
	Version	20.5
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	a1608da
	App Center Build	WooCommerce - Prototype Builds #10995

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[hafizrahman]

This looks great! I tested all cards on an 13inch iPad in Simulator, both in Landscape and Portrait mode. I also tested all existing functionalities in the cards and as far as I can tell they work properly.

The logic refactor on the three special cards also works nicely in my test.

I'm unsure about the column placement logic. e.g: if I go to Edit and order cards to be A, B, C, D, they will be shown as:

A C
B D

But I might be expecting something like this instead:

A B
C D

Because B being second in the list might mean it's the second most important card to see, and being put at the top is more important visually than at the bottom.

Additionally, if have many cards but I want to put two specific cards at the very top, it's not intuitive to do. The second card will need to be put in the middle of the list.

This is just my hunch and hypothetical situation, though, and in practice I don't know if merchants will be complaining about this. Let's wait for feedbacks.

[itsmeichigo]

@hafizrahman Good suggestion! I think it makes more sense to show cards in your preferred order. I've updated the logic in 4835966. Let me know if there's anything else needed to be improved.

[hafizrahman]

Thanks! The new ordering logic looks great and it does feel more intuitive going from My Store to Edit screen to see how things are ordered.

I found an edge case with the Coupons card where if there's only one coupon like in my case and there's one other card, it seems like it's trying to match the other card's height and showing a stretched height situation:

Next to Performance	Next to Blaze

This happens less if there's more cards in the same column:

I think it's good to fix it in this PR too, because this happens only in two column situation, as far as I can check.

[itsmeichigo]

@hafizrahman Good catch! I fixed the layout issue for the coupon card in 59b957f. I also added a check for accessibility font size to avoid creating two columns for the dashboard - the large font size would make it hard to read the contents.

Please take another look and let me know if all is good now.

[dangermattic]

	1 Warning
⚠️	This PR is assigned to the milestone 20.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

[hafizrahman]

Thanks for fixing the coupon card situation, it looks good to me after doing various tests.

a check for accessibility font size to avoid creating two columns for the dashboard

This works nicely, and good thinking for adding it also! This is a good check that I should keep in mind for future layouting.