V3 focus style slightly overlaps text where line height and spacing are low

[andysellick]

Some components have links closely spaced or links that can wrap onto a second line. With the new V3 focus styles this can cause some minor text cropping/overlapping issues, specifically:

Text beneath focussed link is too close:

Text wrapped onto a second line causes the lower part of some letters in the first line to be cut off:

Components to fix:

• image card
• attachment
• textarea
• metadata
• organisation logo
• related navigation
• document list
• possibly others?

This issue should be addressed after the V3 PR has been merged.

[injms]

I'll take a look at this, since it's blocking a release on government-frontend.

[andysellick]

Interestingly this issue is noticeable on the Design System website.

[NickColley]

Perhaps we should consider removing the upper focus style padding? Would be good to know the different circumstances that this appears.