fix: Monospacing errors in dashboards & charts (#18796)

* fix: Monospacing errors in dashboards & charts * removed unnecessary styling
apache · Feb 25, 2022 · 4923256 · 4923256
1 parent 0db49b1
commit 4923256
Showing 1 changed file with 9 additions and 1 deletion.
diff --git 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'}