Purchase management: Correct DataViews table CSS

[JessBoctor]

Related to #

• Feature Request: Allow purchase management page to be sorted or filtered, especially by upcoming renewal date #86616
• Design: Redesign /me/purchases to adopt DataViews #100555

Proposed Changes

• Correct the CSS for the DataViews table to get it as close to the current Active Upgrades layout as possible.

Production

DataViews PR

One specific change to note, since DataViews renders the fields in a true table format, we can no longer rely on flex to push the "status" column to the right and reduce its width. So when there are extremely long site titles or URLs, this PR has changed the CSS to hide the overflow. The other option is to break the string and wrap it on a new line.

Production: Shifts the "columns" to handle the longer string

DataViews PR: Hides the overflow

Another issue to highlight is that DataViews doesn't currently allow the column elements to wrap or stack in smaller screens. Our current production option allows the different PurchasesItem components to wrap in together. DataViews maintains the table view which can be scrolled left or right for the whole view.

Why are these changes being made?

• As part of converting the Active upgrades list from the PurchasesSites component to DataViews, we have to account for styling changes now that the different payment elements are being rendered in a table format.

Testing Instructions

• Apply this PR to your dev environment and start up Calypso
• Make sure to set purchases/purchase-list-dataview to "true" in development.json
• Go to me/purchases
• View the DataViews table and notice that styling is similar to when you visit https://wordpress.com/me/purchases

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)?

[JessBoctor]

Making a note:

@sirbrillig pointed out in #102742 (comment) that the donation purchases are showing up below the DataViews table, rather than being included in it.

Need to figure out why that is happening.

UPDATE: Turns out this isn't CSS related, but rather the purchases being rendered outside of the original PurchasesSites component

[JessBoctor]

@sirbrillig I think the CSS fixes for the DataViews table are ready for review.

[sirbrillig]

This looks way better! Thanks!

There's one more thing I noticed while testing this (and maybe you already know), but it's not directly related to this PR: I think the table view has lost the ability to link to the single purchase view. This becomes particularly notable at mobile width due to horizontal scrolling.

Production	DataView	DataView scrolled

Anyway, definitely not a blocker here. I'll mention it on #86616