From 392e39e621841e8b608fb95edad56730eda42265 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 27 Oct 2019 07:51:20 +0000
Subject: [PATCH] fix(ui): don't allow overflow on silence details

---
 ui/src/Components/ManagedSilence/SilenceDetails.js     |  8 ++++----
 .../ManagedSilence/__snapshots__/index.test.js.snap    |  8 ++++----
 ui/src/Components/SilenceModal/index.stories.js        | 10 ++++++++++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.js b/ui/src/Components/ManagedSilence/SilenceDetails.js
index 71db79df6..dc6dd4731 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.js
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.js
@@ -41,7 +41,7 @@ const SilenceDetails = ({
 
   return (
     <div className="mt-1">
-      <div className="d-flex flex-row justify-content-between">
+      <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
         <div className="flex-shrink-1 flex-grow-1">
           <div>
             <span className="badge px-1 mr-1 components-label">
@@ -109,10 +109,10 @@ const SilenceDetails = ({
             </div>
           </div>
         </div>
-        <div className="flex-shrink-0 flex-grow-0">
-          <div className="d-flex flex-column">
+        <div className="flex-shrink-0 flex-grow-0 mt-lg-0 mt-2">
+          <div className="d-flex flex-fill flex-lg-column flex-row justify-content-around">
             <button
-              className="btn btn-outline-secondary btn-sm mb-2"
+              className="btn btn-outline-secondary btn-sm mb-lg-2 mb-0"
               onClick={onEditSilence}
             >
               <FontAwesomeIcon
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index ae8eda9f4..070c95b87 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -150,7 +150,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
   </div>
   <div class=\\"card-body pt-0\\">
     <div class=\\"mt-1\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
+      <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
         <div class=\\"flex-shrink-1 flex-grow-1\\">
           <div>
             <span class=\\"badge px-1 mr-1 components-label\\">
@@ -266,9 +266,9 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </div>
           </div>
         </div>
-        <div class=\\"flex-shrink-0 flex-grow-0\\">
-          <div class=\\"d-flex flex-column\\">
-            <button class=\\"btn btn-outline-secondary btn-sm mb-2\\">
+        <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2\\">
+          <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\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.js
index 73fea9550..a7dfd557c 100644
--- a/ui/src/Components/SilenceModal/index.stories.js
+++ b/ui/src/Components/SilenceModal/index.stories.js
@@ -97,6 +97,16 @@ storiesOf("SilenceModal", module)
       const silence = MockSilence();
       silence.startsAt = "2018-08-14T16:00:00Z";
       silence.endsAt = `2018-08-14T18:${index < 10 ? "0" + index : index}:00Z`;
+      silence.matchers.push({
+        name: "thisIsAveryLongNameToTestMatcherWrapping",
+        value: "valueIsAlsoAbitLong",
+        isRegex: false
+      });
+      silence.matchers.push({
+        name: "alertname",
+        value: "(foo1|foo2|foo3|foo4)",
+        isRegex: true
+      });
       silence.id = `silence${index}`;
       silences.push({
         cluster: "am",