From 2c8db31fe555f79c1d46710d90230d8d45106588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 28 Oct 2019 10:38:59 +0000
Subject: [PATCH] fix(ui): fix matcher overflowing parent of silence details

---
 .../GroupFooter/__snapshots__/index.test.js.snap       |  2 +-
 ui/src/Components/ManagedSilence/SilenceComment.js     |  2 +-
 ui/src/Components/ManagedSilence/SilenceDetails.js     |  6 +++---
 .../__snapshots__/SilenceComment.test.js.snap          |  4 ++--
 .../ManagedSilence/__snapshots__/index.test.js.snap    | 10 +++++-----
 5 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 6a32be090..c255111d2 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
@@ -313,7 +313,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
           </div>
         </div>
         <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
-          <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+          <div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
             <span class=\\"text-muted mr-2 font-italic\\">
               — me@example.com
             </span>
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index 76de2d0c0..e7c65e9ba 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -42,7 +42,7 @@ const SilenceComment = ({
         </div>
       </div>
       <div className="pt-1 d-flex flex-row justify-content-between">
-        <div className="flex-shrink-1 flex-grow-1 components-managed-silence-cite">
+        <div className="flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite">
           <span className="text-muted mr-2 font-italic">
             &mdash; {silence.createdBy}
           </span>
diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.js b/ui/src/Components/ManagedSilence/SilenceDetails.js
index dc6dd4731..126bdbda9 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.js
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.js
@@ -42,7 +42,7 @@ const SilenceDetails = ({
   return (
     <div className="mt-1">
       <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
-        <div className="flex-shrink-1 flex-grow-1">
+        <div className="flex-shrink-1 flex-grow-1 mw-1p">
           <div>
             <span className="badge px-1 mr-1 components-label">
               <FontAwesomeIcon
@@ -91,7 +91,7 @@ const SilenceDetails = ({
               </span>
             </div>
             <div
-              className="flex-shrink-1 flex-grow-1"
+              className="flex-shrink-1 flex-grow-1 mw-1p"
               style={{ minWidth: "0px" }}
             >
               {silence.matchers.map(matcher => (
@@ -109,7 +109,7 @@ const SilenceDetails = ({
             </div>
           </div>
         </div>
-        <div className="flex-shrink-0 flex-grow-0 mt-lg-0 mt-2">
+        <div className="flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ml-0">
           <div className="d-flex flex-fill flex-lg-column flex-row justify-content-around">
             <button
               className="btn btn-outline-secondary btn-sm mb-lg-2 mb-0"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
index 6363fcb59..97eddc552 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -26,7 +26,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
   </div>
 </div>
 <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
-  <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+  <div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
     <span class=\\"text-muted mr-2 font-italic\\">
       — me@example.com
     </span>
@@ -83,7 +83,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
   </div>
 </div>
 <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
-  <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+  <div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
     <span class=\\"text-muted mr-2 font-italic\\">
       — me@example.com
     </span>
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index c04db6a49..e1bef58c2 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -28,7 +28,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
       </div>
     </div>
     <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
-      <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+      <div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
         <span class=\\"text-muted mr-2 font-italic\\">
           — me@example.com
         </span>
@@ -99,7 +99,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
       </div>
     </div>
     <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
-      <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+      <div class=\\"flex-shrink-1 flex-grow-1 mw-1p components-managed-silence-cite\\">
         <span class=\\"text-muted mr-2 font-italic\\">
           — me@example.com
         </span>
@@ -125,7 +125,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
   <div class=\\"card-body pt-0\\">
     <div class=\\"mt-1\\">
       <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
-        <div class=\\"flex-shrink-1 flex-grow-1\\">
+        <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
           <div>
             <span class=\\"badge px-1 mr-1 components-label\\">
               <svg aria-hidden=\\"true\\"
@@ -228,7 +228,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
                 Matchers:
               </span>
             </div>
-            <div class=\\"flex-shrink-1 flex-grow-1\\"
+            <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\"
                  style=\\"min-width: 0px;\\"
             >
               <span class=\\"badge badge-light px-1 mr-1 components-label\\">
@@ -240,7 +240,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </div>
           </div>
         </div>
-        <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2\\">
+        <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ml-0\\">
           <div class=\\"d-flex flex-fill flex-lg-column flex-row justify-content-around\\">
             <button class=\\"btn btn-outline-secondary btn-sm mb-lg-2 mb-0\\">
               <svg aria-hidden=\\"true\\"