From 4923256b01305bb327be5bd52eab26234baa174f Mon Sep 17 00:00:00 2001
From: Smart-Codi <codemaster08240328@gmail.com>
Date: Fri, 25 Feb 2022 06:20:01 +0000
Subject: [PATCH] fix: Monospacing errors in dashboards & charts (#18796)

* fix: Monospacing errors in dashboards & charts

* removed unnecessary styling
---
 superset-frontend/src/chart/Chart.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/chart/Chart.jsx b/superset-frontend/src/chart/Chart.jsx
index 6e1003f79a1cf..7fb5f47808f7c 100644
--- a/superset-frontend/src/chart/Chart.jsx
+++ b/superset-frontend/src/chart/Chart.jsx
@@ -113,6 +113,14 @@ const RefreshOverlayWrapper = styled.div`
   justify-content: center;
 `;
 
+const MonospaceDiv = styled.div`
+  font-family: ${({ theme }) => theme.typography.families.monospace};
+  white-space: pre;
+  word-break: break-word;
+  overflow-x: auto;
+  white-space: pre-wrap;
+`;
+
 class Chart extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -224,7 +232,7 @@ class Chart extends React.PureComponent {
         key={chartId}
         chartId={chartId}
         error={error}
-        subtitle={message}
+        subtitle={<MonospaceDiv>{message}</MonospaceDiv>}
         copyText={message}
         link={queryResponse ? queryResponse.link : null}
         source={dashboardId ? 'dashboard' : 'explore'}