diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx index a5e9c4912e3..22880a4fcc0 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.tsx @@ -82,7 +82,7 @@ const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) = verticalAlign: 'baseline', backgroundColor: colors.color, color: theme.v1.palette.gray98, - whiteSpace: 'nowrap', + whiteSpace: 'pre', textShadow: 'none', padding: '3px 6px', borderRadius: theme.shape.radius.default, diff --git a/public/app/features/alerting/unified/components/Label.tsx b/public/app/features/alerting/unified/components/Label.tsx index 88d3e8d877d..30379578968 100644 --- a/public/app/features/alerting/unified/components/Label.tsx +++ b/public/app/features/alerting/unified/components/Label.tsx @@ -137,7 +137,7 @@ const getStyles = (theme: GrafanaTheme2, color?: string, size?: string) => { borderLeft: 'none', borderTopRightRadius: theme.shape.borderRadius(2), borderBottomRightRadius: theme.shape.borderRadius(2), - whiteSpace: 'nowrap', + whiteSpace: 'pre', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '300px', diff --git a/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx b/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx index 26929327c08..914ba8067de 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Matchers.tsx @@ -80,6 +80,10 @@ const getStyles = (theme: GrafanaTheme2) => ({ border: `solid 1px ${borderColor}`, borderRadius: theme.shape.borderRadius(2), + + // Ensure we preserve whitespace, as otherwise it's not noticeable _at all_ + // when rendering the matcher, and is only noticeable when editing + whiteSpace: 'pre', }), }; },