[Security Solution][Detections] Fixes utility bar text overflow issue…

… on Rule Execution Log (#129752) ## Summary Resolves #129321 (comment) #### Before: <p align="center"> <img width="700" src="https://user-images.githubusercontent.com/2946766/162233704-2d321bd0-bde8-4d3a-942a-9155138fffed.png" /> </p> #### After: <p align="center"> <img width="700" src="https://user-images.githubusercontent.com/2946766/162219564-22fc4158-f2d8-4e5b-bf64-50dcc4034260.gif" /> </p> ### Checklist Delete any items that are not applicable to this PR. - [X] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
elastic · Apr 7, 2022 · a27ae07 · a27ae07
1 parent 401ad52
commit a27ae07
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/..._engine/rules/details/execution_log_table/__snapshots__/execution_log_table.test.tsx.snap b/..._engine/rules/details/execution_log_table/__snapshots__/execution_log_table.test.tsx.snap
diff --git a/...tections/pages/detection_engine/rules/details/execution_log_table/execution_log_table.tsx b/...tections/pages/detection_engine/rules/details/execution_log_table/execution_log_table.tsx
@@ -314,18 +314,20 @@ const ExecutionLogTableComponent: React.FC<ExecutionLogTableProps> = ({
           )}
         </UtilityBarSection>
         <UtilityBarSection>
-          <UtilityBarText dataTestSubj="executionsShowing">
-            {timelines.getLastUpdated({
-              showUpdating: isLoading || isFetching,
-              updatedAt: dataUpdatedAt,
-            })}
-          </UtilityBarText>
-          <UtilitySwitch
-            label={i18n.RULE_EXECUTION_LOG_SHOW_METRIC_COLUMNS_SWITCH}
-            checked={showMetricColumns}
-            compressed={true}
-            onChange={(e) => onShowMetricColumnsCallback(e.target.checked)}
-          />
+          <UtilityBarGroup>
+            <UtilityBarText dataTestSubj="executionsShowing">
+              {timelines.getLastUpdated({
+                showUpdating: isLoading || isFetching,
+                updatedAt: dataUpdatedAt,
+              })}
+            </UtilityBarText>
+            <UtilitySwitch
+              label={i18n.RULE_EXECUTION_LOG_SHOW_METRIC_COLUMNS_SWITCH}
+              checked={showMetricColumns}
+              compressed={true}
+              onChange={(e) => onShowMetricColumnsCallback(e.target.checked)}
+            />
+          </UtilityBarGroup>
         </UtilityBarSection>
       </UtilityBar>
       <EuiBasicTable