5798

What this PR does

This PR fixes a formatting issue in the ArticleViewer component where usernames in the legend were poorly formatted when there were many of them.

Cause of the Bug:

The specific point where the bug was introduced is still unknown. I've checked previous commits where this issue was supposedly resolved, but the problem still persists in my local development environment.

Fix for the Bug:

Flex-wrap Property:
- The issue is resolved by using the flex-wrap: wrap property in the .user-legend-wrap class of _diff_viewer.styl.
Width Adjustments:
- Increased the width of the first flex container in the article footer to allow more usernames to fit on a single line. The second flex container, which holds three fixed-size buttons, remains unaffected by this change. If additional buttons are added in the future, the width property of .user-legend-wrap may need further adjustment, as it is specified in rem. This approach was chosen because the three buttons have fixed sizes and will not change.
UI Consistency:
- Fixing the article-viewer-legend with flex-wrap introduced minor(bug) changes in the diff-viewer-legend UI. These were addressed by removing some inline styles from diff_viewer.jsx, ensuring that finalDate and characterCount appear in their respective rows instead of a single row.

Note:

The existing .user-legend-wrap CSS class, which was modified to fix the bug, is only used in two places: article-viewer-legend and diff-viewer-legend.