Update sticky state for the plans grid action buttons

[oswian]

Related to #82853

Proposed Changes

• For the plans grid action buttons in sticky state:
  • The button copy now uses parentheses ("Upgrade (€17)") instead of a hyphen ("Upgrade – €17")
  • The button font size is no longer reduced

Before	After

Why are these changes being made?

• The copy "Upgrade – €17" is confusing because the '-' can be interpreted as a minus sign
• The reduced font size is unexpected as the button copy still fits using the larger/original font size

Testing Instructions

• Visit /plans/:site
• Scroll down the plans grid until the upgrade buttons enter sticky state
• The button copy should uses parentheses around the amount eg. "Upgrade (€17)" instead of "Upgrade – €17"
• The button font size should not change when entering the sticky state

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

Link to live branch is being generated...
Please wait a few minutes and refresh this page.

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

[oswian]

The ticket raises an additional issue, however I haven't been able to replicate:

"When I scroll up, then on the bottom edge of the page the action buttons also become sticky (or at least get the sticky styling), but they are not really sticky, they scroll away."

I've added a comment to the ticket. If you're able to reproduce this behaviour, let me know!

---

Update: I was able to replicate the issue in Firefox and have pushed a fix: #82853 (comment)

[a8ci18n]

Translation for this Pull Request has now been finished.

[southp]

I'll need to double check on the font size behavior against some longer languages. In the meantime, I think it'd be the best if we follow what /pricing does for consistency:

i.e. instead of parentheses, using the dot symbol. One side advantage is that we won't need to wait for translation, since we will be simply reusing it.

[southp]

Wrapping to a new line for longer copy + currency works as expected:

One thing I'd like to mention is that we seem to wrap the line overly conservative, e.g. English + MX:

It's obvious that there is still room to fit everything into one line. However, since it's the same behavior in production, we should create a follow-up for it if we really want to address it.

[oswian]

@southp Thanks for the review!

instead of parentheses, using the dot symbol

Good idea, updated to use the dot: fcdffc9

It's obvious that there is still room to fit everything into one line. However, since it's the same behavior in production, we should create a follow-up for it if we really want to address it.

Yes you're right, there is quite a bit of room. I've created a ticket: https://github.com/Automattic/martech/issues/3504

---

I've also pushed a fix to prevent the sticky behaviour at the bottom of the screen: 9549718

[oswian]

Just noticed we have separate action button strings for the /start/plans page, so these need to be updated as well. Update pushed: 9b5482b