Alerting: Make whitespace more visible on labels (#90223)

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,

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',

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',
       }),
     };
   },