From 95c036be5c4c600169cde2d2298c665ea43c9da0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 20 Dec 2019 23:00:05 +0000
Subject: [PATCH] fix(ui): tweak css for ErrorBoundary component

---
 ui/src/Components/Grid/index.stories.js         | 2 +-
 ui/src/ErrorBoundary.tsx                        | 8 ++++----
 ui/src/__snapshots__/ErrorBoundary.test.js.snap | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/src/Components/Grid/index.stories.js b/ui/src/Components/Grid/index.stories.js
index 4ddf80830..d5ec644e1 100644
--- a/ui/src/Components/Grid/index.stories.js
+++ b/ui/src/Components/Grid/index.stories.js
@@ -18,7 +18,7 @@ storiesOf("Grid", module)
   .add("InternalError", () => {
     return (
       <InternalError
-        message="React error boundary message"
+        message="React error boundary message with a veryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrapping"
         secondsLeft={45}
         progressLeft={66}
       />
diff --git a/ui/src/ErrorBoundary.tsx b/ui/src/ErrorBoundary.tsx
index d1dae0826..e9c239af1 100644
--- a/ui/src/ErrorBoundary.tsx
+++ b/ui/src/ErrorBoundary.tsx
@@ -17,13 +17,13 @@ interface InternalErrorProps {
 }
 
 const InternalError: StatelessComponent<InternalErrorProps> = props => (
-  <div className="jumbotron text-center bg-primary my-4">
-    <div className="container-fluid">
-      <h1 className="display-1 my-5">
+  <div className="text-placeholder screen-center">
+    <div className="container-fluid text-center">
+      <h1 className="display-1">
         <FontAwesomeIcon className="text-danger mr-4" icon={faBomb} />
         <span className="text-muted">Internal error</span>
       </h1>
-      <p className="lead text-white bg-secondary px-1 py-3 rounded">
+      <p className="lead text-white bg-secondary p-3 rounded text-wrap text-break">
         {props.message}
       </p>
       <p className="text-muted d-inline-block">
diff --git a/ui/src/__snapshots__/ErrorBoundary.test.js.snap b/ui/src/__snapshots__/ErrorBoundary.test.js.snap
index e9909b532..ce4fdf094 100644
--- a/ui/src/__snapshots__/ErrorBoundary.test.js.snap
+++ b/ui/src/__snapshots__/ErrorBoundary.test.js.snap
@@ -2,9 +2,9 @@
 
 exports[`<ErrorBoundary /> matches snapshot 1`] = `
 "
-<div class=\\"jumbotron text-center bg-primary my-4\\">
-  <div class=\\"container-fluid\\">
-    <h1 class=\\"display-1 my-5\\">
+<div class=\\"text-placeholder screen-center\\">
+  <div class=\\"container-fluid text-center\\">
+    <h1 class=\\"display-1\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -23,7 +23,7 @@ exports[`<ErrorBoundary /> matches snapshot 1`] = `
         Internal error
       </span>
     </h1>
-    <p class=\\"lead text-white bg-secondary px-1 py-3 rounded\\">
+    <p class=\\"lead text-white bg-secondary p-3 rounded text-wrap text-break\\">
       Error: Error thrown from problem child
     </p>
     <p class=\\"text-muted d-inline-block\\">