MWPW-153629: [Mini compare] Stack cards on mobile

[Axelcureno]

Removes mobile styles for mini compare chart and instead stacks them all in one column.

Resolves: https://jira.corp.adobe.com/browse/MWPW-153629

Test URLs:

• Before: https://main--milo--adobecom.hlx.page/docs/library/kitchen-sink/merch-card
• After: https://mwpw-153629--milo--adobecom.hlx.page/docs/library/kitchen-sink/merch-card
  Dummy page for the PSI check: https://mwpw-155619-cards-overlapping-sorting--milo--mirafedas.hlx.page/

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• a00b1a7 ✅ (latest)

[aem-code-sync]

	Page	Scores	Audits	Google
M	/docs/library/kitchen-sink/merch-card
D	/docs/library/kitchen-sink/merch-card

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.89%. Comparing base (f92f07c) to head (a00b1a7).
Report is 4 commits behind head on stage.

Additional details and impacted files

@@           Coverage Diff           @@
##            stage    #2675   +/-   ##
=======================================
  Coverage   95.88%   95.89%           
=======================================
  Files         173      173           
  Lines       45771    45771           
=======================================
+ Hits        43886    43890    +4     
+ Misses       1885     1881    -4     

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

[Roycethan]

@Axelcureno
1)Some rows are having more empty spaces and not adjusted accordingly
https://main--cc--adobecom.hlx.live/creativecloud?milolibs=mwpw-153629--milo--adobecom

2) More empty spce before the CTA's
https://main--cc--adobecom.hlx.live/cz/creativecloud?milolibs=mwpw-153629--milo--adobecom

3)For Tablet : it should be two column layput per latest XD even in Individuals tab:
Need to adjust:
https://main--cc--adobecom.hlx.live/cz/creativecloud?milolibs=mwpw-153629--milo--adobecom

[Axelcureno]

@Roycethan I'm seeing different, can you try refreshing the page when switching to mobile / tablet? This extra space is added normally when window is resized and not refreshed, since we calculate height with js.

[Roycethan]

All the above 3 issues are different and are reproducible even at page refresh. #1 although happens when scrolling down - scroll down adding extra padding or disturbing the calculation.
#2 and #3 are reproducible
Let me know if more details to reproduce needed

[github-actions]

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

[Roycethan]

Marked issues are resolved, approving, Needs to be verified post other reviews for regressions

[yesil]

can we move this in utils.js?

[Axelcureno]

Done

[Roycethan]

@Axelcureno Price Font sizes are of 24 px at https://main--cc--adobecom.hlx.live/creativecloud?milolibs=mwpw-153629--milo--adobecom
they are at about 16 px at Main, plz check thanks

[Roycethan]

@Axelcureno Price Font sizes are of 24 px at https://main--cc--adobecom.hlx.live/creativecloud?milolibs=mwpw-153629--milo--adobecom they are at about 16 px at Main, plz check thanks

Fixed

[Roycethan]

@Axelcureno
AC: Suppress the empty rows

Still see Empty rows exists:

[Axelcureno]

@Axelcureno AC: Suppress the empty rows

Still see Empty rows exists:

I have removed the empty rows @Roycethan

[Roycethan]

@Axelcureno AC: Suppress the empty rows
Still see Empty rows exists:

I have removed the empty rows @Roycethan

Fixed Thanks

[Roycethan]

@Axelcureno aem-psi-check is failing and need attention

[milo-pr-merge]

Skipped merging 2675: MWPW-153629: [Mini compare] Stack cards on mobile due to failing checks