Fix overflow behaviour on small screens for <OakInlineBanner/>

[orangemug]

How to review this PR

Leave this text block for the reviewer

• Check component hierarchy is followed correctly
• Check the design Heuristics have been followed
• Check naming conventions have been applied
• Check for these gotchyas:
  • Missing exports for Oak components
  • Accidental export of Internal components
  • Snapshots of unexpected components have been modified
  • Circular dependencies
  • Code duplication (via not using base components)
  • Non-functional storybook for this or related components
  • Sensitve files changed eg. atoms, or style tokens
  • Relative imports
  • Default exports

Add your PR description below

Fix overflow behaviour on small screens for <OakInlineBanner/> raised in https://app.notion.com/p/oaknationalacademy/Inline-banner-on-mobile-3b926cc4e1b180f49f49d1d357101880?source=copy_link

Link to the design doc

https://www.figma.com/design/YcWQMMhHPVVmc47cHHEEAl/Oak-Design-Kit?node-id=9923-4249&m=dev

A link to the component in the deployment preview

• <OakInlineBanner/>
• <OakDownloadsJourneyChildSubjectTierSelector/> — uses <OakInlineBanner/>
• <OakTeacherNotesModal/> — uses <OakInlineBanner/>

Testing instructions

Regression test <OakInlineBanner/>

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
oak-components-storybook	Ready	Preview	Aug 26, 2026 9:21am

[charsville]

How do I reproduce the original issue in Storybook? 😅

I might be doing a silly, but I am looking at the stories in inspector on mobile, and then adding loads of text to title/message/cta, but I cant see the original issue where it overflows.

Im looking at current main and the preview deploy, but seem to behave the same?

[notion-workspace]

Inline banner on mobile

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[rightsaidjames]

On banners without a title prop, the message and CTA were split into two columns. Now, on viewport widths below 750px, the link text wraps onto a separate line, avoiding the previous squashing behaviour. LGTM!