[A11y] Adjusted homepage circuit board label sizes to accommodate text spacing

[advay26]

Addresses #8988

Problem:

On the Home page, when text spacing is applied, the 'package versions' and 'unique packages' text overflows outside its container.

NOTE: I was told to use codepen.io to apply text spacing, but it can also be achieved by adding this to the stylesheet:

* {
 line-height: 1.5 !important;
 letter-spacing: 0.12em !important;
 word-spacing: 0.16em !important;
}

p{
 margin-bottom: 2em !important;
}

Regular home page:

After applying text spacing:

Fix:

To fix this, I made the label containers wider to accommodate the expanded text. The resulting UI changes seem minor to look at, but I'm happy to get additional feedback on that.

After the changes,

Regular home page:

After applying text spacing:

[loic-sharma]

Do you know why we're using width for the circuit board instead of padding? This manual width approach may break once we reach 1 trillion downloads.

[agr]

I think the package downloads box width should be increased a bit more:

That 1 looks too close to the left edge and might overflow when it is turned to some other digit.

[agr]

If we are to go with dynamic width approach, we also might need to update the image to move the "unique packages" box a little bit down to remove the chance of it overlapping with the "package downloads" one.

[shishirx34]

Agree, I would check the padding solution if possible for dynamic increases in content and width.

[advay26]

@NuGet/gallery-team
I've made the following changes:

• Used padding to dynamically decide the label width
• Anchored labels on one of their sides to avoid spilling over into the circuit board image ('package downloads' and 'unique packages' can only expand rightwards, 'package versions' can only expand leftwards)
• Edited the circuit board image (svg) to shorten the stem under the 'unique packages' label and move the label down. This was done so that there would be greater separation between the 'unique packages' label and the 'package downloads' label in case the 'package downloads' label expands rightwards.

How the changes look

Regular home page:

With text spacing:

Also, NuGet's now ready for its meteoric growth, nothing stopping us now 💪🚀

[clairernovotny]

LGTM on the aesthetic side. I can't comment on the CSS.