Performance Bar improvements

What does this MR do and why?

Performance Bar improvements:

• Uses gl-font-sm
• Adds tooltips where missing
• Migrates GlPopover to use GlTooltip instead
• Migrates GlEmoji from using v-safe-html to an actual component
• Improves overall look & feel
• Alignment changes
• Slightly increased height from 35px to 40px to improve bounding boxes around clicking elements
• Mobile improvements (adds the ability to scroll, aligns items to the left [LTR])

Screenshots or screen recordings

Before	After

Mobile

Shows the metrics from left. Adds a scroll wrapper so the information can be actually viewed on mobile.

Before	After

Tooltip example

How to set up and validate locally

1. Open GDK
2. Press p & b to enable performance bar

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to UX Paper Cuts 16.5 → Cleanup (#424403 - closed), Performance bar colors in development are diffi... (#20650 - closed) & Reorganize the Performance Bar (#352360)