Text wrapping on inline small radios

[amyb-hiveit]

Description of the issue

When using inline small radios the text can wrap:

I think this is due to max-width: calc(100% - 74px) on .govuk-radios__label, it needs to be adjusted down a bit for small radios.

Steps to reproduce the issue

• Add the govuk-radios--inline govuk-radios--small classes to a radio group:

  <div class="govuk-radios govuk-radios--inline govuk-radios--small">
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="sortControlsForm-sortBy-newest" name="sortBy" type="radio" value="newest">
      <label class="govuk-label govuk-radios__label" for="sortControlsForm-sortBy-newest">Newest</label>
    </div>
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="sortControlsForm-sortBy-title" name="sortBy" type="radio" value="title">
      <label class="govuk-label govuk-radios__label" for="sortControlsForm-sortBy-title">A to Z</label>
    </div>
  </div>
  

Actual vs expected behaviour

The text wraps when there are multiple words.

It shouldn't wrap unless the container constrains the space.

Environment (where applicable)

• GOV.UK Frontend Version: 5.2.0