Use flexbox gap to position currency symbol with the tax information string

[billrobbins]

Follow-up to #98920

Proposed Changes

The new Billing History component based on DataViews (currently enabled in DEV) had a bug where the currency symbol would appear next to the tax string in currency-on-right locales. The lack of space made it look like the currency symbol was part of the string instead of being separated by a space.

This PR adjusts the fix from 98920 to use the flexbox gap property instead of a left-hand margin. It also moves the changes to client/me/purchases/billing-history/style-data-view.scss so they'll be scoped specifically for the new Billing History component.

It also replaces a min-height property for the loading state of the list with a bit of styling to center the spinner without using such an artificially large loading area.

Why are these changes being made?

By utilizing the gap property, we should be able to avoid any unexpected alignment issues if this line were to end up broken up in the future.

Symbol on the left of amount

Symbol on the right of amount

RTL language

Testing Instructions

• Open http://calypso.localhost:3000/me/purchases/billing and locate a receipt that includes tax.
• Make sure the currency symbol and tax information are properly aligned.
• Switch your locale to Greek or Polish and refresh the Billing History. Make sure the alignment includes a space between the currency symbol and the tax string.
• Switch your locale to a RTL language (such as Hebrew) and check again to make sure the spacing is consistent.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-89aa42a37c6359a93da527f1076ded290471dfd6

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-89aa42a37c6359a93da527f1076ded290471dfd6&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-89aa42a37c6359a93da527f1076ded290471dfd6&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirbrillig]

Looks good!