Embedded snippets: Improve UI representation

Summary

We have a great new community contribution with our "Embedded snippets" feature, available with 10.8.
The UI presentation of the embedded snippet could be improved in some details.

Steps to reproduce

Embedded these two public (project) snippets in any HTML.

<script src="https://gitlab.com/akaemmerle/example-project/snippets/1714803.js"></script> <!-- includes file name -->
<script src="https://gitlab.com/akaemmerle/example-project/snippets/1714813.js"></script>

Examples

• Example of new "Embed/Share" block available for public snippets at GitLab
• Embedded snippet example on GitLab Pages
• Screenshot of embedded snippets for reference.

Findings/Improvements

• Header
  • Do we need the leading gl-snippet-icon icon at all? Does not hold any UI functionality
  • Vertical alignment: gl-snippet-icon is not centered
  • Vertical alignment: gl-logo is not optically centered, horizontal padding too large
  • Horizontal alignment: padding right too small (especially if no filename available)
  • Is there any other snippet information available if no filename is provided?
  • Move "… on 🦊 GitLab" outside of the title text, to the right or to a new footer?
  • Active state of embedded snippet input (js-snippet-url-area) grows into right "Copy to clipboard" button
  • Line numbering gets cut off after magic 79.

cc @tauriedavis