Argo-cd: Summary legend overflow view

[jsoref]

Checklist:

• [x] I've searched in the docs and FAQ for my answer: https://bit.ly/argocd-faq.
• [x] I've included steps to reproduce the bug.
• [x] I've pasted the output of argocd version.

Describe the bug

The summary legend (especially Progressing) overflows the box containing the chart

To Reproduce

1. Visit https://cd.apps.argoproj.io/applications?view=summary
2. If necessary, zoom in/out to trigger the bug

Expected behavior

Text for a chart shouldn't flow outside the chart's box.

Screenshots

If applicable, add screenshots to help explain your problem.

Version

v1.7.0+10d05cd

Logs

[keithchong]

Hi @jsoref, @jessesuen , I can take this.

[keithchong]

This is also reproducible simply by resizing the browser and making its width as small or narrow as possible. This exposes another issue with the layout and the Sync legend overlaps with the Health pie chart.

In this case, the pie charts should be in one column, and not two.

[keithchong]

Here is a demo of the proposed new layout. Note that the Summary section on the left side does not take as much space.

4187-ResizeRelayout.zip

Compare it with the current behaviour by going here:

https://cd.apps.argoproj.io/applications?view=summary

[keithchong]

Thanks for the thumbs up @jsoref. @alexmt, if you like this new layout, I will submit a PR for it.

[alexmt]

Thank you for attaching the proposed layout video. It looks really good.