From 490e0f43de77c2c4fd8b6b041d6d6166544852ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 27 Oct 2019 09:00:03 +0000
Subject: [PATCH] fix(ui): avoid overflows on silence component

---
 .../GroupFooter/__snapshots__/index.test.js.snap     |  6 +++---
 .../ManagedSilence/__snapshots__/index.test.js.snap  | 12 ++++++------
 ui/src/Components/ManagedSilence/index.js            |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index 0d6ef4eb1..c96e4818a 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -289,9 +289,9 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   <div class=\\"components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-0\\">
     <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
       <div class=\\"card-header border-bottom-0\\">
-        <div class=\\"d-flex flex-row justify-content-between\\">
+        <div class=\\"d-flex flex-row justify-content-between mw-100\\">
           <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
-            <span class=\\"my-1\\">
+            <div class=\\"my-1\\">
               <div class=\\"d-flex flex-row\\">
                 <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
                   <svg aria-hidden=\\"true\\"
@@ -335,7 +335,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
                   </span>
                 </div>
               </div>
-            </span>
+            </div>
           </div>
           <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
             <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 070c95b87..589bed245 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -4,9 +4,9 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 "
 <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
   <div class=\\"card-header border-bottom-0\\">
-    <div class=\\"d-flex flex-row justify-content-between\\">
+    <div class=\\"d-flex flex-row justify-content-between mw-100\\">
       <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
-        <span class=\\"my-1\\">
+        <div class=\\"my-1\\">
           <div class=\\"d-flex flex-row\\">
             <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
               <svg aria-hidden=\\"true\\"
@@ -60,7 +60,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
               </span>
             </div>
           </div>
-        </span>
+        </div>
       </div>
       <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
         <svg aria-hidden=\\"true\\"
@@ -88,9 +88,9 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
 "
 <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
   <div class=\\"card-header border-bottom-0\\">
-    <div class=\\"d-flex flex-row justify-content-between\\">
+    <div class=\\"d-flex flex-row justify-content-between mw-100\\">
       <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
-        <span class=\\"my-1\\">
+        <div class=\\"my-1\\">
           <div class=\\"d-flex flex-row\\">
             <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
               <svg aria-hidden=\\"true\\"
@@ -128,7 +128,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
               </span>
             </div>
           </div>
-        </span>
+        </div>
       </div>
       <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
         <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js
index e9d23f062..b455d7a80 100644
--- a/ui/src/Components/ManagedSilence/index.js
+++ b/ui/src/Components/ManagedSilence/index.js
@@ -74,14 +74,14 @@ const ManagedSilence = observer(
         <MountFade in={true}>
           <div className="card my-1 components-managed-silence">
             <div className="card-header border-bottom-0">
-              <div className="d-flex flex-row justify-content-between">
+              <div className="d-flex flex-row justify-content-between mw-100">
                 <div className="flex-grow-1 flex-shrink-1 mr-2">
-                  <span className="my-1">
+                  <div className="my-1">
                     <SilenceComment
                       silence={silence}
                       collapsed={this.collapse.value}
                     />
-                  </span>
+                  </div>
                 </div>
                 <div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
                   <FontAwesomeIcon