From dffbc35119e2acd56ba2f429f2fca78ac7ebdc3c Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Tue, 29 Sep 2020 15:59:40 -0500 Subject: [PATCH] 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. --- .../public/components/shared/ApmHeader/index.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx index 9f67ba99103ec4..6674abe9b8ce53 100644 --- a/x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx +++ b/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 ( <> - - {children} + + {children}