diff --git a/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap
index e8e7fd85a..67ab8f410 100644
--- a/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`<UpstreamError /> matches snapshot 1`] = `
 <div class=\\"alert alert-danger text-center m-1\\"
      role=\\"alert\\"
 >
-  <h4 class=\\"alert-heading mb-0\\">
+  <h4 class=\\"alert-heading mb-0 text-wrap text-break\\">
     Alertmanager
     <span class=\\"font-weight-bold\\">
       foo
diff --git a/ui/src/Components/Grid/UpstreamError/index.js b/ui/src/Components/Grid/UpstreamError/index.js
index 720ea1d00..0ff089d06 100644
--- a/ui/src/Components/Grid/UpstreamError/index.js
+++ b/ui/src/Components/Grid/UpstreamError/index.js
@@ -11,7 +11,7 @@ class UpstreamError extends Component {
     const { name, message } = this.props;
     return (
       <div className="alert alert-danger text-center m-1" role="alert">
-        <h4 className="alert-heading mb-0">
+        <h4 className="alert-heading mb-0 text-wrap text-break">
           Alertmanager <span className="font-weight-bold">{name}</span> raised
           an error: {message}
         </h4>