diff --git a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
index 18b271a3abc297..87e83e0c47b6d2 100644
--- a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
@@ -18,7 +18,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import React, { useEffect, useState, useCallback } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
 import { OnDataProviderEdited } from '../timeline/events';
@@ -46,15 +46,6 @@ export const HeaderContainer = styled.div`
 
 HeaderContainer.displayName = 'HeaderContainer';
 
-// SIDE EFFECT: the following `createGlobalStyle` overrides the default styling
-// of euiComboBoxOptionsList because it's implemented as a popover, so it's
-// not selectable as a child of the styled component
-const StatefulEditDataProviderGlobalStyle = createGlobalStyle`
-  .euiComboBoxOptionsList {
-    z-index: 9999;
-  }
-`;
-
 interface Props {
   andProviderId?: string;
   browserFields: BrowserFields;
@@ -157,107 +148,104 @@ export const StatefulEditDataProvider = React.memo<Props>(
     }, []);
 
     return (
-      <>
-        <EuiPanel paddingSize="s">
-          <EuiFlexGroup direction="column" gutterSize="none">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
-                <EuiFlexItem grow={false}>
-                  <EuiFormRow label={i18n.FIELD}>
-                    <EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
-                      <EuiComboBox
-                        data-test-subj="field"
-                        isClearable={false}
-                        onChange={onFieldSelected}
-                        options={getCategorizedFieldNames(browserFields)}
-                        placeholder={i18n.FIELD_PLACEHOLDER}
-                        selectedOptions={updatedField}
-                        singleSelection={{ asPlainText: true }}
-                        style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
-                      />
-                    </EuiToolTip>
-                  </EuiFormRow>
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <EuiFormRow label={i18n.OPERATOR}>
+      <EuiPanel paddingSize="s">
+        <EuiFlexGroup direction="column" gutterSize="none">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiFormRow label={i18n.FIELD}>
+                  <EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
                     <EuiComboBox
-                      data-test-subj="operator"
+                      data-test-subj="field"
                       isClearable={false}
-                      onChange={onOperatorSelected}
-                      options={operatorLabels}
-                      placeholder={i18n.SELECT_AN_OPERATOR}
-                      selectedOptions={updatedOperator}
+                      onChange={onFieldSelected}
+                      options={getCategorizedFieldNames(browserFields)}
+                      placeholder={i18n.FIELD_PLACEHOLDER}
+                      selectedOptions={updatedField}
                       singleSelection={{ asPlainText: true }}
-                      style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
+                      style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
                     />
-                  </EuiFormRow>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-
-            <EuiFlexItem grow={false}>
-              <EuiSpacer />
-            </EuiFlexItem>
+                  </EuiToolTip>
+                </EuiFormRow>
+              </EuiFlexItem>
 
-            {updatedOperator.length > 0 &&
-            updatedOperator[0].label !== i18n.EXISTS &&
-            updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
               <EuiFlexItem grow={false}>
-                <EuiFormRow label={i18n.VALUE_LABEL}>
-                  <EuiFieldText
-                    className={VALUE_INPUT_CLASS_NAME}
-                    data-test-subj="value"
-                    onChange={onValueChange}
-                    placeholder={i18n.VALUE}
-                    value={sanatizeValue(updatedValue)}
+                <EuiFormRow label={i18n.OPERATOR}>
+                  <EuiComboBox
+                    data-test-subj="operator"
+                    isClearable={false}
+                    onChange={onOperatorSelected}
+                    options={operatorLabels}
+                    placeholder={i18n.SELECT_AN_OPERATOR}
+                    selectedOptions={updatedOperator}
+                    singleSelection={{ asPlainText: true }}
+                    style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
                   />
                 </EuiFormRow>
               </EuiFlexItem>
-            ) : null}
+            </EuiFlexGroup>
+          </EuiFlexItem>
 
-            <EuiFlexItem grow={false}>
-              <EuiSpacer />
-            </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiSpacer />
+          </EuiFlexItem>
 
+          {updatedOperator.length > 0 &&
+          updatedOperator[0].label !== i18n.EXISTS &&
+          updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    autoFocus
-                    className={SAVE_CLASS_NAME}
-                    color="primary"
-                    data-test-subj="save"
-                    fill={true}
-                    isDisabled={
-                      !selectionsAreValid({
-                        browserFields,
-                        selectedField: updatedField,
-                        selectedOperator: updatedOperator,
-                      })
-                    }
-                    onClick={() => {
-                      onDataProviderEdited({
-                        andProviderId,
-                        excluded: getExcludedFromSelection(updatedOperator),
-                        field: updatedField.length > 0 ? updatedField[0].label : '',
-                        id: timelineId,
-                        operator: getQueryOperatorFromSelection(updatedOperator),
-                        providerId,
-                        value: updatedValue,
-                      });
-                    }}
-                    size="s"
-                  >
-                    {i18n.SAVE}
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <EuiFormRow label={i18n.VALUE_LABEL}>
+                <EuiFieldText
+                  className={VALUE_INPUT_CLASS_NAME}
+                  data-test-subj="value"
+                  onChange={onValueChange}
+                  placeholder={i18n.VALUE}
+                  value={sanatizeValue(updatedValue)}
+                />
+              </EuiFormRow>
             </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPanel>
-        <StatefulEditDataProviderGlobalStyle />
-      </>
+          ) : null}
+
+          <EuiFlexItem grow={false}>
+            <EuiSpacer />
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  autoFocus
+                  className={SAVE_CLASS_NAME}
+                  color="primary"
+                  data-test-subj="save"
+                  fill={true}
+                  isDisabled={
+                    !selectionsAreValid({
+                      browserFields,
+                      selectedField: updatedField,
+                      selectedOperator: updatedOperator,
+                    })
+                  }
+                  onClick={() => {
+                    onDataProviderEdited({
+                      andProviderId,
+                      excluded: getExcludedFromSelection(updatedOperator),
+                      field: updatedField.length > 0 ? updatedField[0].label : '',
+                      id: timelineId,
+                      operator: getQueryOperatorFromSelection(updatedOperator),
+                      providerId,
+                      value: updatedValue,
+                    });
+                  }}
+                  size="s"
+                >
+                  {i18n.SAVE}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
     );
   }
 );
diff --git a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
index 1a3c2fefbf47f0..cd437911ab5897 100644
--- a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
@@ -6,14 +6,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-
-// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
-const LoadingPanelGlobalStyle = createGlobalStyle`
-  .euiPanel-loading-hide-border {
-    border: none;
-  }
-`;
+import styled from 'styled-components';
 
 const SpinnerFlexItem = styled(EuiFlexItem)`
   margin-right: 5px;
@@ -39,30 +32,27 @@ export const LoadingPanel = React.memo<LoadingProps>(
     position = 'relative',
     zIndex = 'inherit',
   }) => (
-    <>
-      <LoadingStaticPanel
-        className="app-loading"
-        height={height}
-        width={width}
-        position={position}
-        zIndex={zIndex}
-      >
-        <LoadingStaticContentPanel>
-          <EuiPanel className={showBorder ? '' : 'euiPanel-loading-hide-border'}>
-            <EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
-              <SpinnerFlexItem grow={false}>
-                <EuiLoadingSpinner size="m" />
-              </SpinnerFlexItem>
+    <LoadingStaticPanel
+      className="app-loading"
+      height={height}
+      width={width}
+      position={position}
+      zIndex={zIndex}
+    >
+      <LoadingStaticContentPanel>
+        <EuiPanel className={showBorder ? '' : 'euiPanel-loading-hide-border'}>
+          <EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
+            <SpinnerFlexItem grow={false}>
+              <EuiLoadingSpinner size="m" />
+            </SpinnerFlexItem>
 
-              <EuiFlexItem grow={false}>
-                <EuiText>{text}</EuiText>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
-        </LoadingStaticContentPanel>
-      </LoadingStaticPanel>
-      <LoadingPanelGlobalStyle />
-    </>
+            <EuiFlexItem grow={false}>
+              <EuiText>{text}</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </LoadingStaticContentPanel>
+    </LoadingStaticPanel>
   )
 );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/page/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/index.tsx
index 582ef2d01fb7e0..68a714029407f0 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/index.tsx
@@ -34,6 +34,19 @@ export const AppGlobalStyle = createGlobalStyle`
   .euiToolTip {
     z-index: 9950 !important;
   }
+
+  /* 
+    overrides the default styling of euiComboBoxOptionsList because it's implemented
+    as a popover, so it's not selectable as a child of the styled component
+  */
+  .euiComboBoxOptionsList {
+    z-index: 9999;
+  }
+
+  /* overrides default styling in angular code that was not theme-friendly */
+  .euiPanel-loading-hide-border {
+    border: none;
+  }
 `;
 
 export const DescriptionListStyled = styled(EuiDescriptionList)`