Fix mobile display of the new email plans page

[daledupreez]

Changes proposed in this Pull Request

This PR includes the following improvements:

• We now hide the "Admin" badge when the user is on narrower screens (this was in the original designs)
• We now use the same font size for the "Expires" text and the auto-renew label
• When the screen gets narrower, we push the "Renew now" button to the right, and allow the auto-renew label to shift onto the next line if needed
• The mailbox-level ellipsis menu is now aligned with the top text, and spacing for it is responsive based on the top row of the mailbox card
• The left spacing for mailboxes with warnings has been fixed for wider screens -- it was too narrow and left mailboxes with warnings too far to the left

Testing instructions

• Open the UI locally or via the live branch
• Navigate to /email/:siteSlug
• Click on an email account that has one or more admin users (which should be most Google Workspace, G Suite, or Professional Email accounts) -- also ensure that the email plan for the subscription shows the auto-renew toggle (which is controlled by whether there is a payment method linked to the subscription)
• For various browser widths, but especially mobile widths (< 600px wide) and tablet widths (< ~1000px), verify the following:
  • We don't show the "Admin" badge across the card (see the screenshots below for a visual)
  • We show the "Auto-renew" text in the same size font as the "Expires" text (this should apply across all screen sizes, including desktop)
  • For narrower widths (especially under ~400px), the subscription management options below the plan header respond well, with the Auto-renew toggle shifting to the next line at narrower widths.
  • The ellipsis menu should be aligned with the top row of text in all cases
  • The mailbox name should not overlap with the ellipsis menu, especially as the screen gets really narrow
• Navigate to the plan page for a domain with email forwarding and an unverified email address for a mailbox. (You can create a new forward if needed.)
• Verify that on narrow screens, the warning content for the mailbox and the ellipsis menu don't interfere with each other. (You may need to test that using Update action menu items in email plans page #52930, which is derived from this branch.)

Screenshots

Before

After

Left spacing for warnings

Before	After

Ellipsis menu alignment and overflow

Before	After

[github-actions]

Test live: https://calypso.live/?branch=fix/mobile-display-email-plans

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~11 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
email        +85 B  (+0.0%)      +11 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[stephanethomas]

This works fine except for admin badges which are displayed too far from mailboxes:

This is caused by some right padding we always apply to mailboxes as a way - I suppose - to keep them from overlapping the ellipsis menu on narrow viewports. I think we could address that by relying on flex for positioning that particular menu instead of using absolute coordinates (which frankly we should avoid as much as possible as this is always a source of problems when making a design responsive).

[stephanethomas]

Hum, I see now that this may be blocking some other enhancements so I'm totally fine with merging that pull request as it-is, and eventually addressing the issue I've raised in a future iteration.

[daledupreez]

This is caused by some right padding we always apply to mailboxes as a way - I suppose - to keep them from overlapping the ellipsis menu on narrow viewports. I think we could address that by relying on flex for positioning that particular menu instead of using absolute coordinates (which frankly we should avoid as much as possible as this is always a source of problems when making a design responsive).

For context, the rest of the card is already using flex, which is part of the problem - the other items need to flow differently from this one. That was actually the source of the problem -- when the other items were using flex-direction: column; we want the padding/space on the top item aligned with the menu, but not the other items. But when we shift to flex-direction: row; for the menu's siblings, the parent element needs the padding, as the first child element is now left-aligned.

[stephanethomas]

Approved 🚢.