search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.16k stars 319 forks source link

Long text in footer columns do not wrap #1647

Closed aliuk2012 closed 2 years ago

aliuk2012 commented 4 years ago

While trying to implement the footer component for Digital Marketplace, we came across an issue with the footer, It doesn't seem to support long navigation text.

We wanted a three-column layout like this:

image

However, as soon as you have links with a lot of content the layout breaks into two columns and the third column overflows onto another row as in this example:

image

I think the expected behaviour should be that the link text adheres to the column width and wraps itself.

I haven't tested this out in other browsers but I did have this problem in Chrome 78.

NickColley commented 4 years ago

We have another issue here relating to the footer layout, makes me think we should be using CSS Grid for this: https://github.com/alphagov/govuk-frontend/issues/1539

aliuk2012 commented 4 years ago

Something interestingly if I reduce the window to tablet/mobile than the link text wraps.

Desktop: image

Table/mobile

image

aliuk2012 commented 4 years ago

Looks like it might be an issue with flex-basis anything other than desktop gets flex-basis: 200px added but in desktop it is not and the li items seem to have 100% width which is why the text does not wrap on desktops.

aliuk2012 commented 4 years ago

I'll see if I can find some time to did a bit deeper into the issue but I think this is a bug and not a feature request.

36degrees commented 2 years ago

We believe this was resolved by the changes in #2462.