Simplify.

justinkambic · justinkambic · commit 574f00bb33ef · 2025-05-19T22:50:36.000-04:00
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.test.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.test.tsx
@@ -22,18 +22,6 @@ jest.mock('../hooks', () => ({
 const { useRuleFormState, useRuleFormDispatch } = jest.requireMock('../hooks');
 
 describe('RuleDetails', () => {
-  beforeAll(() => {
-    class ResizeObserver {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    }
-
-    // this only sets the mock polyfill for this test file's env
-    // we delete it in `afterAll` as well
-    globalThis.ResizeObserver = ResizeObserver;
-  });
-
   beforeEach(() => {
     useRuleFormState.mockReturnValue({
       formData: {
@@ -48,12 +36,6 @@ describe('RuleDetails', () => {
     jest.resetAllMocks();
   });
 
-  afterAll(() => {
-    if ('ResizeObserver' in globalThis) {
-      delete (globalThis as any).ResizeObserver;
-    }
-  });
-
   test('Renders correctly', () => {
     render(<RuleDetails />);
 
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   EuiFormRow,
   EuiFieldText,
@@ -20,8 +20,6 @@ import { RULE_NAME_INPUT_TITLE, RULE_TAG_INPUT_TITLE, RULE_TAG_PLACEHOLDER } fro
 import { useRuleFormState, useRuleFormDispatch } from '../hooks';
 import { OptionalFieldLabel } from '../optional_field_label';
 
-export const RULE_DETAIL_MIN_ROW_WIDTH = 600;
-
 export const RuleDetails = () => {
   const { formData, baseErrors } = useRuleFormState();
 
@@ -72,13 +70,8 @@ export const RuleDetails = () => {
     }
   }, [dispatch, tags]);
 
-  const {
-    ref,
-    size: { width },
-  } = useContainerRef();
-
   return (
-    <EuiFlexGroup ref={ref} direction={width > RULE_DETAIL_MIN_ROW_WIDTH ? 'row' : 'column'}>
+    <EuiFlexGroup>
       <EuiFlexItem>
         <EuiFormRow
           data-test-subj="ruleDetails"
@@ -119,23 +112,3 @@ export const RuleDetails = () => {
     </EuiFlexGroup>
   );
 };
-
-function useContainerRef() {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const observer = new ResizeObserver(([entry]) => {
-      const { width, height } = entry.contentRect;
-      setSize({ width, height });
-    });
-
-    observer.observe(ref.current);
-
-    return observer.disconnect;
-  }, []);
-
-  return { ref, size };
-}
