fix: user header layout on narrow screens

[thomasheartman]

This PR throws in a number of fixes to the UsersHeader's invite link and licensed users components:

• Change the border colors from the primary purple to being a standard border color
• Fix text / button wrapping in the invite link component. It now wraps such that the button goes onto the row below the text if it cannot fit on the same row. The text within the button will not wrap until it absolutely has to (and is on its own line).
• Fix the wrapping behavior of the licensed users box: the bottom row ("seats used 30 days" and "view graph over time") will now wrap at the same time as the other button in the other box.
• Fix some text sizes within the licensed users box
• Fix the button to look more like a link in the licensed users box

Most of it is pretty standard fare, but I've taken a slightly different route when it comes to the licensed users box component.

I switched the whole component to be a "figure" instead of an article. I was trying to figure out how I could make it behave the way we wanted visually while still linking the "seats over 30 days" to the "11 /25" counter text. The examples on MDN use things such as code snippets, poems, quotes, etc, in addition to the more common image elements. And in a way, 11/25 is a figure representing the number of seats used, so I went with that for now. That said, I'd be very interested to hear some other takes on this.

Now, because the figcaption has to be the first or last element of a figure element, I had to include the "open sidebar" button inside the caption, which isn't ideal. But I can live with it, I think.

Before:

After:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
unleash-monorepo-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 26, 2024 1:49pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
unleash-docs	⬜️ Ignored (Inspect)	Visit Preview		Nov 26, 2024 1:49pm

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

OpenSSF Scorecard

Package	Version	Score	Details

Scanned Files

[thomasheartman]

I moved the wrapper in here, because without it, it's not a bar, but two pieces of contents. It also made more sense for the usersheader component.