Fix APM header wrapping (#78845)

Add `wrap` to the flex group for the APM header and remove the `break-all` CSS.

Makes it so the date picker doesn't get cut off on narrow screens and the header text does not wrap unnecessarily.

x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx

@@ -6,25 +6,15 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { ReactNode } from 'react';
-import styled from 'styled-components';
 import { DatePicker } from '../DatePicker';
 import { EnvironmentFilter } from '../EnvironmentFilter';
 import { KueryBar } from '../KueryBar';
 
-// Header titles with long, unbroken words, like you would see for a long URL in
-// a transaction name, with the default `work-break`, don't break, and that ends
-// up pushing the date picker off of the screen. Setting `break-all` here lets
-// it wrap even if it has a long, unbroken work. The wrapped result is not great
-// looking, since it wraps, but it doesn't push any controls off of the screen.
-const ChildrenContainerFlexItem = styled(EuiFlexItem)`
-  word-break: break-all;
-`;
-
 export function ApmHeader({ children }: { children: ReactNode }) {
   return (
     <>
-      <EuiFlexGroup alignItems="center" gutterSize="s">
-        <ChildrenContainerFlexItem>{children}</ChildrenContainerFlexItem>
+      <EuiFlexGroup alignItems="center" gutterSize="s" wrap={true}>
+        <EuiFlexItem>{children}</EuiFlexItem>
         <EuiFlexItem grow={false}>
           <DatePicker />
         </EuiFlexItem>