search

Royal-Navy / design-system

Build web applications that meet the Royal Navy service standards
https://storybook.design-system.navy.digital.mod.uk
Apache License 2.0
103 stars 32 forks source link

Phase banner doesn't wrap well on small viewports #3733

Closed jpveooys closed 4 weeks ago

jpveooys commented 1 month ago

Steps to reproduce

  1. Go to https://storybook.design-system.navy.digital.mod.uk/iframe.html?args=&id=phase-banner--default&viewMode=story
  2. Make the viewport narrow

The main text wraps below the badge and is indented:

image

I think it would make sense if the main text stayed to the right of the badge (and wrapped there). As a comparison, the GOV.UK Design System phase banner wraps like this:

image