From 8ca29cb636bcb548d46bed70fe6f3863a8168c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 17 Mar 2021 09:14:47 +0000
Subject: [PATCH] Avoid overflow on /targets page (#8609)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Target errors are rendered as badges. If error text is very long it will expand the table since badges are not allowed to wrap.
Replace badge with a span which is allowed to wrap around.

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
---
 web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx
index 390fe3da9c..bdbc995ae0 100644
--- a/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx
+++ b/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx
@@ -70,7 +70,7 @@ const ScrapePoolPanel: FC<PanelProps> = ({ scrapePool, targetGroup }) => {
                   </td>
                   <td className={styles['last-scrape']}>{formatRelative(lastScrape, now())}</td>
                   <td className={styles['scrape-duration']}>{humanizeDuration(lastScrapeDuration * 1000)}</td>
-                  <td className={styles.errors}>{lastError ? <Badge color={color}>{lastError}</Badge> : null}</td>
+                  <td className={styles.errors}>{lastError ? <span className="text-danger">{lastError}</span> : null}</td>
                 </tr>
               );
             })}