From 8c91d4e6e2222133d7e7edab8be8e9ddc2ba5c68 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 31 May 2022 06:54:17 -0400
Subject: [PATCH] Alerting: fix layout with long words / numbers (#49882)
 (#49889)

(cherry picked from commit e04f84fd1bd54fb9d129643a5a3a356ada143a8d)

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
---
 .../unified/components/AnnotationDetailsField.tsx   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
index 5d8061c220c..5c193fd1053 100644
--- a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
+++ b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx
@@ -34,15 +34,22 @@ export const AnnotationDetailsField: FC<Props> = ({ annotationKey, value }) => {
 
 const AnnotationValue: FC<Props> = ({ annotationKey, value }) => {
   const styles = useStyles(getStyles);
-  if (wellableAnnotationKeys.includes(annotationKey)) {
-    return <Well>{value}</Well>;
-  } else if (value && value.startsWith('http')) {
+
+  const needsWell = wellableAnnotationKeys.includes(annotationKey);
+  const needsLink = value && value.startsWith('http');
+
+  if (needsWell) {
+    return <Well className={styles.well}>{value}</Well>;
+  }
+
+  if (needsLink) {
     return (
       <a href={value} target="__blank" className={styles.link}>
         {value}
       </a>
     );
   }
+
   return <>{value}</>;
 };