Internal issue 3240 - Compact mode doesn't work for full-width tabs if any ancestor element has display set to something other than block

I’d like ICDS tabs to be able to take up the full width of the parent container, then shrink to the compact mode when the parent container is too narrow to fit the tabs.

This works automatically if all ancestor elements of the tabs have display: block, but breaks if any use display: grid or display: flex.

I’ve made an example stackblitz: [https://stackblitz.com/edit/mvxwo552?file=src%2Fapp.tsx&hideExplorer=1](https://stackblitz.com/edit/mvxwo552?file=src%2Fapp.tsx&hideExplorer=1)

If you uncomment each of the display options for the main container in turn, and shrink the viewport width, you can see that the tabs only go into compact mode when the main container has display: block.

I’ve tried putting various extra containers between these, but it seems that, if any ancestor of the tabs has display: grid or display: flex, the compact mode breaks.

This is a problem for us as we’re using display: grid for our main page layout and, if we can’t work around this, magnifier users will be unable to use our site properly as it is breaking reflow.

As part of this ticket, please add a Cypress visual regression test

Start with the linked StackBlitz reproduction at src/app.tsx and compare the tabs inside block, grid, and flex ancestors as the viewport narrows. Locate the ICDS tabs implementation and add the requested Cypress visual regression test; done means full-width tabs switch to compact mode correctly under grid and flex ancestors.

Written by the indexing model from the issue text.