Review attachment component with external links

[MartinJJones]

What

There appears to be a couple of issues with the attachment component with external links that are worth looking into further:

• In IE11, long URL strings are not contained and may overlap with other elements on the page as shown in the screenshot below
• The metadata text size is not consistent with other metadata component styles, here it is 19px, should it be 16px?
• The URL's visual don't look great on the page
• How well do they work with screenreaders?

Screenshot showing the issue in IE11

Further info

• Fix attachment metadata styling issue #3501
• Review metadata component usage #3482
• https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

[nnagewad]

@MartinJJones is this still an issue?

[MartinJJones]

@MartinJJones is this still an issue?

This does still appear to be an issue in IE11, I was able to reproduce this in BrowserStack by testing in IE11 and modifying an attachment url to include a long string with no hyphens to break the text.