govTabs in minimised screen squish up

[sarahmwong]

Currently, when you have a small width window, gov tabs squish up like so:

Instead this should readjust so that the tabs appear as a list of tables instead (https://design-system.service.gov.uk/components/tabs/default/):

Don't think this is an easy fix - likely requires some fun js to fix, possibly linked to #65

[jenisayshi]

So this fixes itself by removing the gov-layout = "two-thirds" arg (might also help with the text wrapping issue if that still exists). Obvs this would impact the rest of the layout so might need reviewing along with the general layout before deciding how to approach govtabs? Looks like the actual function is copying the gov uk version as it's supposed to - only thing w gov tabs is that because on my laptop the screen can get smaller than the gov uk version you have to scroll across (screenshot)

?

[sarahmwong]

Thank you for spotting Jeni! Had a look and I don't think we would want to get rid of 2/3 sizing as an option here (most gov websites adopt that kind of spacing). I think we'd still want users to be able to choose between this and a widescreen option requested in #98 - @cjrace interested to know your thoughts here/if you agree we should try and fix this for the 2/3 sizing?

[cjrace]

It does change to exactly as you'd expect @sarahmwong once you zoom far enough. I see what you do, but if I keep squishing it does eventually switch. So I think the fix for this might actually be just changing the breakpoint in the CSS so it breaks out of tabs sooner?

Agree we wouldn't want to get rid of 2/3's sizing as an option generally. Expect we'll end up supporting both that and full width

[sarahmwong]

Oooh good spot @cjrace - I think playing with the breakpoints may also help with #89 - tagging here in case we fix both in one go

[sarahmwong]

Noting down before I forget - think the issue is that the container that the 2/3 content sits in is also responsive to the breakpoints set at the top of the CSS - the sidebar nav gets shifted to the top of the page and treats it as "full screen" when we get to about 1/3 screen width. Because it's then being treated as "full screen", we need to reduce that down again before the media query kicks in? Need to see if we can separate the two breakpoints out for different elements or at least the side bar/main content one

[sarahmwong]

Noting again after faffing! Above doesn't work - when you change the breakpoints for the tabs, works fine in 2/3 sizing but then changes over too quickly in widescreen. Need some sort of if/else logic maybe to get it to have diff breakpoints for the different options