[Security Solution] Fix broken Rule Details page when filters are ext…

…remely long (elastic#153338)

Fixes elastic#145076

## Summary

When creating a rule that has a **filter** which is extremely long, the
Rules Detail UI breaks and information is lost, out of view of the user,
due to a broken layout. See connected issue for examples, or below.

This PR fixes this bug via a a couple simple CSS fixes in the related
components.

# Screenshots

## Desktop

**Before**
<img width="1713" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470618-b4835d2f-1343-4e94-8b42-c0ebae064f1c.png">


**After**
<img width="1723" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470507-07d3d482-0ece-4ecb-9e19-03b18e2803ea.png">

## Mobile

**Before**
<img width="481" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470744-f16aca4f-b547-4601-ac6c-c95a641752a8.png">


**After**
<img width="486" alt="image"
src="https://user-images.githubusercontent.com/5354282/226470790-e6d06b09-0c7f-49eb-bf8f-07f34b6303e4.png">


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/security_solution/public/detections/components/rules/description_step/helpers.tsx

@@ -100,7 +100,7 @@ export const buildQueryBarDescription = ({
         description: (
           <EuiFlexGroup wrap responsive={false} gutterSize="xs">
             {filterManager.getFilters().map((filter, index) => (
-              <EuiFlexItem grow={false} key={`${field}-filter-${index}`}>
+              <EuiFlexItem grow={false} key={`${field}-filter-${index}`} css={{ width: '100%' }}>
                 <EuiBadgeWrap color="hollow">
                   {indexPatterns != null ? (
                     <FilterBadgeGroup filters={[filter]} dataViews={[indexPatterns]} />

x-pack/plugins/security_solution/public/detections/components/rules/description_step/index.tsx

@@ -56,6 +56,7 @@ import { useLicense } from '../../../../common/hooks/use_license';
 import type { LicenseService } from '../../../../../common/license';
 
 const DescriptionListContainer = styled(EuiDescriptionList)`
+  max-width: 600px;
   &.euiDescriptionList--column .euiDescriptionList__title {
     width: 30%;
   }