Resolve "Merge request widget - CI information has different margins"

What does this MR do?

1. Fixes the bug: Moves the graph to the end of the sentence.
2. Fixes technical debt:
3. Moves the file into a .vue file
4. Removes a lot of HTML elements not needed, improving performance since DOM needs less watchers
5. Removes the all store from the component, making it more easy to reuse and improving performance since it has less watcher
6. Cleans tests: Some test were testing vue itself, other where testing all inside the same it making it hard to maintain. Each rendered output is now inside it's own it block and only rendered output and more complex computed props are being tested.

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together

What are the relevant issue numbers?

Closes #38395 (closed)