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

packages/react/src/component-tests/IcTabs/IcTabs.cy.tsx

@@ -3,6 +3,7 @@
 
 import React from "react";
 import { mount } from "cypress/react";
+import { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from "../../components";
 import {
   BE_VISIBLE,
   HAVE_ATTR,
@@ -665,3 +666,74 @@ describe("IcTabs visual regression in high contrast mode", () => {
     });
   });
 });
+
+const ReflowTabs = () => (
+  <IcTabContext>
+    <IcTabGroup label="Example tab group">
+      <IcTab>Ingredients</IcTab>
+      <IcTab>Preparation method</IcTab>
+      <IcTab>Recipe history</IcTab>
+      <IcTab>Recommended drinks</IcTab>
+      <IcTab>Related recipes</IcTab>
+      <IcTab>Kitchen blog</IcTab>
+    </IcTabGroup>
+    <IcTabPanel>Ingredients</IcTabPanel>
+    <IcTabPanel>Preparation method</IcTabPanel>
+    <IcTabPanel>Recipe history</IcTabPanel>
+    <IcTabPanel>Recommended drinks</IcTabPanel>
+    <IcTabPanel>Related recipes</IcTabPanel>
+    <IcTabPanel>Kitchen blog</IcTabPanel>
+  </IcTabContext>
+);
+
+const ConstrainedReflowTabs = ({ display }: { display: "flex" | "grid" }) => (
+  <div
+    id={`${display}-tabs-container`}
+    style={{ display, width: "320px", maxWidth: "100%" }}
+  >
+    <div style={{ width: "100%" }}>
+      <ReflowTabs />
+    </div>
+  </div>
+);
+
+const checkCompactReflow = (display: "flex" | "grid") => {
+  cy.checkHydrated(IC_TAB_GROUP);
+
+  cy.findShadowEl(IC_TAB_GROUP, "ic-horizontal-scroll").should(
+    "have.class",
+    "ic-horizontal-scroll-visible"
+  );
+
+  cy.get(`#${display}-tabs-container`).then(([container]) => {
+    expect(container.scrollWidth).to.be.at.most(container.clientWidth);
+  });
+
+  // Match the existing compact-tabs regression: this layout state inherits
+  // the horizontal-scroll accessibility baseline and is tested here for reflow.
+  cy.compareSnapshot({
+    name: `/compact-${display}-ancestor`,
+    testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.014),
+  });
+};
+
+describe("IcTabs flex/grid reflow", () => {
+  beforeEach(() => {
+    cy.viewport(360, 600);
+    cy.injectAxe();
+  });
+
+  afterEach(() => {
+    cy.task("generateReport");
+  });
+
+  it("should enter compact mode inside a flex layout", () => {
+    mount(<ConstrainedReflowTabs display="flex" />);
+    checkCompactReflow("flex");
+  });
+
+  it("should enter compact mode inside a grid layout", () => {
+    mount(<ConstrainedReflowTabs display="grid" />);
+    checkCompactReflow("grid");
+  });
+});

packages/web-components/src/components/ic-tab-group/ic-tab-group.css

@@ -1,5 +1,7 @@
 :host {
   display: block;
+  contain: inline-size;
+  min-width: 0;
   margin-bottom: var(--ic-space-md);
   border-bottom: var(--ic-space-1px) solid var(--ic-tab-bottom-border);
 }