[REVERT] Manual testing story

acstll · acstll · commit 8efe389ccb2e · 2025-12-11T14:04:58.000+01:00
diff --git a/packages/eui/src/components/resizable_container/resizable_container.stories.tsx b/packages/eui/src/components/resizable_container/resizable_container.stories.tsx
@@ -7,11 +7,13 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { faker } from '@faker-js/faker';
 
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 import { EuiText } from '../text';
+import { useEuiContainerQuery } from '../../services/container_query';
 import {
   EuiResizableContainer,
   EuiResizableContainerProps,
@@ -30,19 +32,37 @@ const placeholderText = (
 const TwoColumns: EuiResizableContainerProps['children'] = (
   EuiResizablePanel,
   EuiResizableButton
-) => (
-  <>
-    <EuiResizablePanel initialSize={50} tabIndex={0}>
-      <EuiText>{placeholderText}</EuiText>
-    </EuiResizablePanel>
-
-    <EuiResizableButton accountForScrollbars="both" />
-
-    <EuiResizablePanel initialSize={50} tabIndex={0}>
-      <EuiText>{placeholderText}</EuiText>
-    </EuiResizablePanel>
-  </>
-);
+) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const matches = useEuiContainerQuery(containerRef, '(inline-size > 400px)');
+
+  return (
+    <>
+      <EuiResizablePanel
+        initialSize={50}
+        tabIndex={0}
+        css={css`
+          container-type: inline-size;
+          outline: 1px dashed;
+        `}
+      >
+        <div ref={containerRef}>
+          <EuiText color={matches ? 'success' : 'default'}>
+            {matches
+              ? 'Container width is greater than 400px'
+              : placeholderText}
+          </EuiText>
+        </div>
+      </EuiResizablePanel>
+
+      <EuiResizableButton accountForScrollbars="both" />
+
+      <EuiResizablePanel initialSize={50} tabIndex={0}>
+        <EuiText>{placeholderText}</EuiText>
+      </EuiResizablePanel>
+    </>
+  );
+};
 
 const ThreeColumns: EuiResizableContainerProps['children'] = (
   EuiResizablePanel,
