Skip to content

fix(web-components): #4464 restore tab reflow in flex and grid - #4626

Open
sylvesterkaczmarek wants to merge 1 commit into
mi6:developfrom
sylvesterkaczmarek:fix/4464-tabs-flex-grid-reflow
Open

fix(web-components): #4464 restore tab reflow in flex and grid#4626
sylvesterkaczmarek wants to merge 1 commit into
mi6:developfrom
sylvesterkaczmarek:fix/4464-tabs-flex-grid-reflow

Conversation

@sylvesterkaczmarek

Copy link
Copy Markdown

Summary of the changes

Fix full-width IcTabs failing to enter compact horizontal-scroll mode when nested inside flex or grid layouts.

The tab group now establishes inline-size containment and allows its minimum inline size to shrink, preventing tab labels from propagating their min-content width through ancestor layout containers. This lets ic-horizontal-scroll observe the actual constrained width and enable compact scrolling as intended.

Testing

  • adds Cypress regression coverage for tabs inside both flex and grid ancestors
  • asserts compact horizontal-scroll mode activates
  • asserts the constrained layout does not overflow horizontally
  • includes accessibility checks and visual regression snapshots

Related issue

Closes #4464

Comment thread packages/react/src/component-tests/IcTabs/IcTabsFlexGridReflow.cy.tsx Outdated
Comment thread packages/react/src/component-tests/IcTabs/IcTabs.cy.tsx
Comment thread packages/react/src/component-tests/IcTabs/IcTabs.cy.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants