From 2e1e41ff15da570e50c72702f99d8ce40b46fe9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 11 Oct 2019 19:21:17 +0100
Subject: [PATCH] fix(ui): tweak css for silence submit errors

---
 .../SilenceSubmit/SilenceSubmitProgress.js       | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.js b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.js
index 4068727fe..1de13971e 100644
--- a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.js
+++ b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.js
@@ -173,12 +173,20 @@ const SilenceSubmitProgress = observer(
       const { cluster } = this.props;
 
       return (
-        <div className="d-flex">
-          <div className="p-2 flex-fill">
+        <div className="d-flex mb-2">
+          <div className="p-2 flex-fill my-auto flex-grow-0 flex-shrink-0">
             <SubmitIcon stateValue={this.submitState.value} />
           </div>
-          <div className="p-2 flex-fill">{cluster}</div>
-          <div className="p-2 flex-fill">{this.submitState.result}</div>
+          <div className="p-2 mr-1 flex-fill my-auto flex-grow-0 flex-shrink-0">
+            {cluster}
+          </div>
+          <div
+            className={`p-2 flex-fill flex-grow-1 flex-shrink-1 rounded ${
+              this.submitState.value === SubmitState.Failed ? "bg-light" : ""
+            }`}
+          >
+            {this.submitState.result}
+          </div>
         </div>
       );
     }