CardView: min-width of root header item container (#30048)

Author: wdevfx

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/render-with-horizontal-scroll (fluent-blue-light).png

@@ -194,6 +194,36 @@ test(
   width: 600,
 }));
 
+test('render with horizontal scroll', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const firstItem = cardView.getHeaderPanel().getHeaderItem(0);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'render-with-horizontal-scroll.png',
+    { element: firstItem.element },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+  await a11yCheck(t, a11yCheckConfig, HEADER_PANEL_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  columns: [
+    {
+      dataField: 'A',
+      caption: 'First long caption',
+    },
+    {
+      dataField: 'B',
+      caption: 'Second long caption',
+    },
+  ],
+  width: 250,
+}));
+
 test('headerPanel column chooser link opens column chooser on click', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const cardView = new CardView(CARD_VIEW_SELECTOR);

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/render-with-horizontal-scroll (generic-light).png

@@ -89,6 +89,7 @@ $sortable-side-offset: 6px;
   in the middle between elements
  */
 .dx-cardview-header-item-container {
+  min-width: fit-content;
   padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
 
   &:first-child {

e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/render-with-horizontal-scroll (material-blue-light).png

@@ -5,7 +5,6 @@
   display: flex;
   align-items: center;
   padding: $cardview-header-panel__item-padding-vertical $cardview-header-panel__item-padding-horizontal;
-  min-width: fit-content;
   user-select: none;
   gap: 4px;
   border: solid $cardview-header-panel__item-border-width;