Possible horizontal overflow when long words are used in some components

[AshGDS]

When testing a PR in government-frontend I noticed that there's a horizontal scrollbar on this page at mobile with in Chrome:

Example at 302px page width:

This is because https://www.globalinnovation.fund/ is one long word, and we may not have styles in place to account for long words. I think this will depend on the user's font size/zoom scale, as when I view the page on my actual phone I don't get this behaviour unless I increase my phone text scale in the settings.

The above link is within the govspeak component, but I think it could happen in some other components. I haven't checked thoroughly but I have noticed it can happen on large versions of heading component - though I can appreciate that a long word being used in a large heading is likely rare.

Example of a heading at 364px page width: