From dd964d2f6b27e9332cf7be6cb1799d475d9f4db6 Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Tue, 11 Apr 2023 19:46:30 +0200
Subject: [PATCH] Minor bug fixes (#505)

* [BUG] Edit details Save button should be blue #499

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [BUG] Detector details has some bad text handling #496

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [BUG] Detector details has some bad text handling #496

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [BUG] Detector details has some bad text handling #496

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

---------

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 public/app.scss                               |   4 +
 .../AlertTriggerView.test.tsx.snap            |  60 +++---
 .../DetectorBasicDetailsView.test.tsx.snap    |  92 ++++-----
 .../UpdateBasicDetails/UpdateBasicDetails.tsx |   1 +
 .../UpdateDetectorBasicDetails.test.tsx.snap  |   4 +-
 .../AlertTriggersView.test.tsx.snap           | 192 ++++++------------
 .../DetectorDetails.test.tsx.snap             | 158 ++++----------
 .../DetectorDetailsView.test.tsx.snap         | 158 ++++----------
 public/utils/constants.ts                     |  10 +
 public/utils/helpers.tsx                      |  23 +--
 10 files changed, 234 insertions(+), 468 deletions(-)

diff --git a/public/app.scss b/public/app.scss
index 524fdfc11..261951b67 100644
--- a/public/app.scss
+++ b/public/app.scss
@@ -121,3 +121,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 .sa-overview-widget-empty tbody > .euiTableRow > .euiTableRowCell {
   border-bottom: none;
 }
+
+.detailsFormRow {
+  width: auto !important;
+}
diff --git a/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap b/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
index cc6d33387..3a2ca668d 100644
--- a/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
+++ b/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
@@ -58,7 +58,7 @@ Object {
                   class="euiSpacer euiSpacer--m"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--fullWidth"
                   id="some_html_id-row"
                 >
                   <div
@@ -103,14 +103,13 @@ Object {
                   class="euiSpacer euiSpacer--m"
                 />
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                 >
                   <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                    style="min-width: 33.333333333333336%;"
+                    class="euiFlexItem"
                   >
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--fullWidth"
                       id="some_html_id-row"
                     >
                       <div
@@ -145,11 +144,10 @@ Object {
                     </div>
                   </div>
                   <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                    style="min-width: 33.333333333333336%;"
+                    class="euiFlexItem"
                   >
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--fullWidth"
                       id="some_html_id-row"
                     >
                       <div
@@ -188,14 +186,13 @@ Object {
                   class="euiSpacer euiSpacer--xl"
                 />
                 <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                 >
                   <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                    style="min-width: 33.333333333333336%;"
+                    class="euiFlexItem"
                   >
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--fullWidth"
                       id="some_html_id-row"
                     >
                       <div
@@ -230,11 +227,10 @@ Object {
                     </div>
                   </div>
                   <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                    style="min-width: 33.333333333333336%;"
+                    class="euiFlexItem"
                   >
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--fullWidth"
                       id="some_html_id-row"
                     >
                       <div
@@ -284,7 +280,7 @@ Object {
                   class="euiSpacer euiSpacer--m"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--fullWidth"
                   id="some_html_id-row"
                 >
                   <div
@@ -321,7 +317,7 @@ Object {
                   class="euiSpacer euiSpacer--l"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--fullWidth"
                   id="some_html_id-row"
                 >
                   <div
@@ -422,7 +418,7 @@ Object {
                 class="euiSpacer euiSpacer--m"
               />
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -467,14 +463,13 @@ Object {
                 class="euiSpacer euiSpacer--m"
               />
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
               >
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                  style="min-width: 33.333333333333336%;"
+                  class="euiFlexItem"
                 >
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--fullWidth"
                     id="some_html_id-row"
                   >
                     <div
@@ -509,11 +504,10 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                  style="min-width: 33.333333333333336%;"
+                  class="euiFlexItem"
                 >
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--fullWidth"
                     id="some_html_id-row"
                   >
                     <div
@@ -552,14 +546,13 @@ Object {
                 class="euiSpacer euiSpacer--xl"
               />
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
               >
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                  style="min-width: 33.333333333333336%;"
+                  class="euiFlexItem"
                 >
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--fullWidth"
                     id="some_html_id-row"
                   >
                     <div
@@ -594,11 +587,10 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                  style="min-width: 33.333333333333336%;"
+                  class="euiFlexItem"
                 >
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--fullWidth"
                     id="some_html_id-row"
                   >
                     <div
@@ -648,7 +640,7 @@ Object {
                 class="euiSpacer euiSpacer--m"
               />
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -685,7 +677,7 @@ Object {
                 class="euiSpacer euiSpacer--l"
               />
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
diff --git a/public/pages/Detectors/components/DetectorBasicDetailsView/__snapshots__/DetectorBasicDetailsView.test.tsx.snap b/public/pages/Detectors/components/DetectorBasicDetailsView/__snapshots__/DetectorBasicDetailsView.test.tsx.snap
index 84a8d02af..a8558fe23 100644
--- a/public/pages/Detectors/components/DetectorBasicDetailsView/__snapshots__/DetectorBasicDetailsView.test.tsx.snap
+++ b/public/pages/Detectors/components/DetectorBasicDetailsView/__snapshots__/DetectorBasicDetailsView.test.tsx.snap
@@ -60,14 +60,13 @@ Object {
             class="euiSpacer euiSpacer--l"
           />
           <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -102,11 +101,10 @@ Object {
               </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -141,11 +139,10 @@ Object {
               </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -180,11 +177,10 @@ Object {
               </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -223,14 +219,13 @@ Object {
             class="euiSpacer euiSpacer--xl"
           />
           <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -265,11 +260,10 @@ Object {
               </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -298,17 +292,16 @@ Object {
                     data-test-subj="text-details-group-content-detector-schedule"
                     id="some_html_id"
                   >
-                    Every 1 minute
+                    Every 1 undefined
                   </div>
                 </div>
               </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -343,11 +336,10 @@ Object {
               </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-              style="min-width: 25%;"
+              class="euiFlexItem"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--fullWidth"
                 id="some_html_id-row"
               >
                 <div
@@ -445,14 +437,13 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
         >
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -487,11 +478,10 @@ Object {
             </div>
           </div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -526,11 +516,10 @@ Object {
             </div>
           </div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -565,11 +554,10 @@ Object {
             </div>
           </div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -608,14 +596,13 @@ Object {
           class="euiSpacer euiSpacer--xl"
         />
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
         >
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -650,11 +637,10 @@ Object {
             </div>
           </div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -683,17 +669,16 @@ Object {
                   data-test-subj="text-details-group-content-detector-schedule"
                   id="some_html_id"
                 >
-                  Every 1 minute
+                  Every 1 undefined
                 </div>
               </div>
             </div>
           </div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
@@ -728,11 +713,10 @@ Object {
             </div>
           </div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="min-width: 25%;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--fullWidth"
               id="some_html_id-row"
             >
               <div
diff --git a/public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx b/public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx
index 7b87e59c7..0810b90c7 100644
--- a/public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx
+++ b/public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx
@@ -294,6 +294,7 @@ export const UpdateDetectorBasicDetails: React.FC<UpdateDetectorBasicDetailsProp
         <EuiFlexItem grow={false}>
           <EuiButton
             onClick={onSave}
+            fill={true}
             disabled={loading || submitting}
             isLoading={submitting}
             data-test-subj={'save-basic-details-edits'}
diff --git a/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap b/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap
index 4cc594d1f..753b7a079 100644
--- a/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap
+++ b/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap
@@ -1685,6 +1685,7 @@ exports[`<UpdateDetectorBasicDetails /> spec renders the component 1`] = `
             <EuiButton
               data-test-subj="save-basic-details-edits"
               disabled={false}
+              fill={true}
               isLoading={false}
               onClick={[Function]}
             >
@@ -1693,13 +1694,14 @@ exports[`<UpdateDetectorBasicDetails /> spec renders the component 1`] = `
                 data-test-subj="save-basic-details-edits"
                 disabled={false}
                 element="button"
+                fill={true}
                 isDisabled={false}
                 isLoading={false}
                 onClick={[Function]}
                 type="button"
               >
                 <button
-                  className="euiButton euiButton--primary"
+                  className="euiButton euiButton--primary euiButton--fill"
                   data-test-subj="save-basic-details-edits"
                   disabled={false}
                   onClick={[Function]}
diff --git a/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap b/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
index 5d4b67e59..6d7e07155 100644
--- a/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
+++ b/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
@@ -665,7 +665,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                           <EuiFormRow
                             describedByIds={Array []}
                             display="row"
-                            fullWidth={false}
+                            fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
                             label={
@@ -678,7 +678,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--fullWidth"
                               id="some_html_id-row"
                             >
                               <div
@@ -760,31 +760,23 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                               className="euiSpacer euiSpacer--m"
                             />
                           </EuiSpacer>
-                          <EuiFlexGroup>
+                          <EuiFlexGroup
+                            className="detailsFormRow"
+                          >
                             <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                             >
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="0"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -797,7 +789,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -859,26 +851,16 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                 </div>
                               </EuiFlexItem>
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="1"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -891,7 +873,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -961,31 +943,23 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                               className="euiSpacer euiSpacer--xl"
                             />
                           </EuiSpacer>
-                          <EuiFlexGroup>
+                          <EuiFlexGroup
+                            className="detailsFormRow"
+                          >
                             <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                             >
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="0"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -998,7 +972,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -1060,26 +1034,16 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                 </div>
                               </EuiFlexItem>
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="1"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -1092,7 +1056,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -1188,7 +1152,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                           <EuiFormRow
                             describedByIds={Array []}
                             display="row"
-                            fullWidth={false}
+                            fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
                             label={
@@ -1201,7 +1165,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--fullWidth"
                               id="some_html_id-row"
                             >
                               <div
@@ -1270,7 +1234,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                           <EuiFormRow
                             describedByIds={Array []}
                             display="row"
-                            fullWidth={false}
+                            fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
                             label={
@@ -1283,7 +1247,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--fullWidth"
                               id="some_html_id-row"
                             >
                               <div
@@ -1698,7 +1662,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                           <EuiFormRow
                             describedByIds={Array []}
                             display="row"
-                            fullWidth={false}
+                            fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
                             label={
@@ -1711,7 +1675,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--fullWidth"
                               id="some_html_id-row"
                             >
                               <div
@@ -1793,31 +1757,23 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                               className="euiSpacer euiSpacer--m"
                             />
                           </EuiSpacer>
-                          <EuiFlexGroup>
+                          <EuiFlexGroup
+                            className="detailsFormRow"
+                          >
                             <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                             >
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="0"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -1830,7 +1786,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -1892,26 +1848,16 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                 </div>
                               </EuiFlexItem>
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="1"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -1924,7 +1870,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -1994,31 +1940,23 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                               className="euiSpacer euiSpacer--xl"
                             />
                           </EuiSpacer>
-                          <EuiFlexGroup>
+                          <EuiFlexGroup
+                            className="detailsFormRow"
+                          >
                             <div
-                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                             >
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="0"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -2031,7 +1969,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -2093,26 +2031,16 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                 </div>
                               </EuiFlexItem>
                               <EuiFlexItem
-                                grow={false}
+                                grow={true}
                                 key="1"
-                                style={
-                                  Object {
-                                    "minWidth": "33.333333333333336%",
-                                  }
-                                }
                               >
                                 <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style={
-                                    Object {
-                                      "minWidth": "33.333333333333336%",
-                                    }
-                                  }
+                                  className="euiFlexItem"
                                 >
                                   <EuiFormRow
                                     describedByIds={Array []}
                                     display="row"
-                                    fullWidth={false}
+                                    fullWidth={true}
                                     hasChildLabel={true}
                                     hasEmptyLabelSpace={false}
                                     label={
@@ -2125,7 +2053,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                                     labelType="label"
                                   >
                                     <div
-                                      className="euiFormRow"
+                                      className="euiFormRow euiFormRow--fullWidth"
                                       id="some_html_id-row"
                                     >
                                       <div
@@ -2221,7 +2149,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                           <EuiFormRow
                             describedByIds={Array []}
                             display="row"
-                            fullWidth={false}
+                            fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
                             label={
@@ -2234,7 +2162,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--fullWidth"
                               id="some_html_id-row"
                             >
                               <div
@@ -2303,7 +2231,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                           <EuiFormRow
                             describedByIds={Array []}
                             display="row"
-                            fullWidth={false}
+                            fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
                             label={
@@ -2316,7 +2244,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--fullWidth"
                               id="some_html_id-row"
                             >
                               <div
diff --git a/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap b/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
index 2bb9ec9ab..dfdebea92 100644
--- a/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
+++ b/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
@@ -1484,31 +1484,23 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                   className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
-              <EuiFlexGroup>
+              <EuiFlexGroup
+                className="detailsFormRow"
+              >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                 >
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="0"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -1521,7 +1513,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -1583,26 +1575,16 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexItem>
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="1"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -1615,7 +1597,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -1677,26 +1659,16 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexItem>
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="2"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -1709,7 +1681,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -1771,26 +1743,16 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexItem>
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="3"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -1803,7 +1765,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -1873,31 +1835,23 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                   className="euiSpacer euiSpacer--xl"
                 />
               </EuiSpacer>
-              <EuiFlexGroup>
+              <EuiFlexGroup
+                className="detailsFormRow"
+              >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
                 >
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="0"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -1910,7 +1864,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -1972,26 +1926,16 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexItem>
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="1"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -2004,7 +1948,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -2057,7 +2001,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                                 onBlur={[Function]}
                                 onFocus={[Function]}
                               >
-                                Every 1 minute
+                                Every 1 undefined
                               </div>
                             </EuiText>
                           </div>
@@ -2066,26 +2010,16 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexItem>
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="2"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -2098,7 +2032,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
@@ -2160,26 +2094,16 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                     </div>
                   </EuiFlexItem>
                   <EuiFlexItem
-                    grow={false}
+                    grow={true}
                     key="3"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
                   >
                     <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                      style={
-                        Object {
-                          "minWidth": "25%",
-                        }
-                      }
+                      className="euiFlexItem"
                     >
                       <EuiFormRow
                         describedByIds={Array []}
                         display="row"
-                        fullWidth={false}
+                        fullWidth={true}
                         hasChildLabel={true}
                         hasEmptyLabelSpace={false}
                         label={
@@ -2192,7 +2116,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                         labelType="label"
                       >
                         <div
-                          className="euiFormRow"
+                          className="euiFormRow euiFormRow--fullWidth"
                           id="some_html_id-row"
                         >
                           <div
diff --git a/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap b/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
index 2ae733d96..abbacfd68 100644
--- a/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
+++ b/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
@@ -542,31 +542,23 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                 className="euiSpacer euiSpacer--l"
               />
             </EuiSpacer>
-            <EuiFlexGroup>
+            <EuiFlexGroup
+              className="detailsFormRow"
+            >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
               >
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="0"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -579,7 +571,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -641,26 +633,16 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="1"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -673,7 +655,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -735,26 +717,16 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="2"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -767,7 +739,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -829,26 +801,16 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="3"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -861,7 +823,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -931,31 +893,23 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                 className="euiSpacer euiSpacer--xl"
               />
             </EuiSpacer>
-            <EuiFlexGroup>
+            <EuiFlexGroup
+              className="detailsFormRow"
+            >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive detailsFormRow"
               >
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="0"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -968,7 +922,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -1030,26 +984,16 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="1"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -1062,7 +1006,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -1115,7 +1059,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                               onBlur={[Function]}
                               onFocus={[Function]}
                             >
-                              Every 1 minute
+                              Every 1 undefined
                             </div>
                           </EuiText>
                         </div>
@@ -1124,26 +1068,16 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="2"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -1156,7 +1090,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
@@ -1218,26 +1152,16 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
-                  grow={false}
+                  grow={true}
                   key="3"
-                  style={
-                    Object {
-                      "minWidth": "25%",
-                    }
-                  }
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                    style={
-                      Object {
-                        "minWidth": "25%",
-                      }
-                    }
+                    className="euiFlexItem"
                   >
                     <EuiFormRow
                       describedByIds={Array []}
                       display="row"
-                      fullWidth={false}
+                      fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       label={
@@ -1250,7 +1174,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--fullWidth"
                         id="some_html_id-row"
                       >
                         <div
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index 89bc2d431..5250d9ccd 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -97,6 +97,16 @@ export enum IntervalType {
   CALENDAR = 'calendar',
 }
 
+export const scheduleUnitText: { [key: string]: string } = {
+  MINUTES: 'minute',
+  HOURS: 'hour',
+  DAYS: 'day',
+  WEEKS: 'week',
+  MONTHS: 'month',
+  QUARTERS: 'quarter',
+  YEARS: 'year',
+};
+
 export const EMPTY_DEFAULT_PERIOD_SCHEDULE: PeriodSchedule = {
   period: {
     interval: 1,
diff --git a/public/utils/helpers.tsx b/public/utils/helpers.tsx
index d076438af..b325ec055 100644
--- a/public/utils/helpers.tsx
+++ b/public/utils/helpers.tsx
@@ -16,7 +16,7 @@ import {
 import moment from 'moment';
 import { PeriodSchedule } from '../../models/interfaces';
 import React from 'react';
-import { DEFAULT_EMPTY_DATA } from './constants';
+import { DEFAULT_EMPTY_DATA, scheduleUnitText } from './constants';
 import {
   RuleItem,
   RuleItemInfo,
@@ -41,14 +41,11 @@ export const renderTime = (time: number | string) => {
   return DEFAULT_EMPTY_DATA;
 };
 
-export function createTextDetailsGroup(
-  data: { label: string; content: any; url?: string }[],
-  columnNum?: number
-) {
+export function createTextDetailsGroup(data: { label: string; content: any; url?: string }[]) {
   const createFormRow = (label: string, content: string, url?: string) => {
     const dataTestSubj = label.toLowerCase().replace(/ /g, '-');
     return (
-      <EuiFormRow label={<EuiText color={'subdued'}>{label}</EuiText>}>
+      <EuiFormRow fullWidth label={<EuiText color={'subdued'}>{label}</EuiText>}>
         {url ? (
           <EuiLink data-test-subj={`text-details-group-content-${dataTestSubj}`}>
             {content ?? DEFAULT_EMPTY_DATA}
@@ -67,14 +64,10 @@ export function createTextDetailsGroup(
     )
   ) : (
     <>
-      <EuiFlexGroup>
+      <EuiFlexGroup className={'detailsFormRow'}>
         {data.map(({ label, content, url }, index) => {
           return (
-            <EuiFlexItem
-              key={index}
-              grow={false}
-              style={{ minWidth: `${100 / (columnNum || data.length)}%` }}
-            >
+            <EuiFlexItem key={index} grow={true}>
               {createFormRow(label, content, url)}
             </EuiFlexItem>
           );
@@ -85,8 +78,12 @@ export function createTextDetailsGroup(
   );
 }
 
+export const pluralize = (count: number, singular: string, plural = singular + 's') => {
+  return [1, -1].includes(Number(count)) ? singular : plural;
+};
+
 export function parseSchedule({ period: { interval, unit } }: PeriodSchedule) {
-  return `Every ${interval} ${unit.toLowerCase()}`;
+  return `Every ${interval} ${pluralize(interval, scheduleUnitText[unit])}`;
 }
 
 export function translateToRuleItems(