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.13k stars 319 forks source link

Tabs do not wrap nicely if there is not enough space for them #1228

Open 36degrees opened 5 years ago

36degrees commented 5 years ago

Where there is not enough space for all of the tabs, the tabs just wrap onto a new line.

As seen on the GOV.UK bank holidays page in landscape on an iPhone X. This can also be seen when resizing on desktop between 641px and ~826px.

img_6699

NickColley commented 5 years ago

We could consider using flexbox for this, but it should be tested with examples of a few tabs, and many tabs.

edwardhorsford commented 5 years ago

A related issue is that the wrapped button moves about depending on which tab is selected:

tabs-wrap-move

Note in the video the inactive tabs have a grey background - but this isn't visible in the gif.

edwardhorsford commented 1 year ago

I just ran across this again today.

Screenshot 2022-08-19 at 14 46 16