Add max width style

elastic · Jul 13, 2022 · 6bcd8ec · 6bcd8ec
1 parent 003d330
commit 6bcd8ec
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/...ck_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx b/...ck_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx
@@ -58,13 +58,13 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
   return (
     <>
       <EuiTitle size="xs">
-        <h5>
+        <h4>
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.conditionsPrompt"
             defaultMessage="Set the threshold and time window"
           />{' '}
           <QueryThresholdHelpPopover />
-        </h5>
+        </h4>
       </EuiTitle>
       <EuiSpacer size="s" />
       <ThresholdExpression

diff --git a/...ack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx b/...ack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx
@@ -16,16 +16,24 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-
+import { css } from '@emotion/react';
 interface State {
   isPopoverOpen: boolean;
 }
 
+const PopoverStyles = css`
+  max-width: 400px;
+`;
+
 export class QueryThresholdHelpPopover extends Component<{}, State> {
   state: State = {
     isPopoverOpen: false,
   };
 
+  PopoverStyles = css`
+    max-width: 400px;
+  `;
+
   _togglePopover = () => {
     this.setState((prevState) => ({
       isPopoverOpen: !prevState.isPopoverOpen,
@@ -40,26 +48,24 @@ export class QueryThresholdHelpPopover extends Component<{}, State> {
 
   _renderContent() {
     return (
-      <div>
+      <div css={PopoverStyles}>
         <EuiText grow={false}>
-          <ol>
-            <li>
-              <FormattedMessage
-                id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
-                defaultMessage="Specify a threshold value and a comparison operator. For example, is above 1000. Each time the rule runs, it checks whether the number of documents that match your query meets this threshold."
-              />
-            </li>
-            <li>
-              <FormattedMessage
-                id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
-                defaultMessage="Specify how far back in time to search. 
-                To avoid gaps in detection, generally this time window should be greater than or equal to the value you chose for the {checkField} field."
-                values={{
-                  checkField: <b>Check every</b>,
-                }}
-              />
-            </li>
-          </ol>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
+              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold. For example, IS ABOVE 1000."
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
+              defaultMessage="The time window indicates how far back in time to search. 
+              To avoid gaps in detection, generally this value should be greater than or equal to the value you chose for the {checkField} field."
+              values={{
+                checkField: <b>Check every</b>,
+              }}
+            />
+          </p>
         </EuiText>
         <EuiSpacer size="m" />
         <EuiCallOut title="Multiple matches of the same document" iconType="pin">