From 585b5a6ab79aa25d07bc5c9022168f31e0c8d5d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 6 Oct 2021 16:36:21 +0100
Subject: [PATCH] fix(ui): revert to 5.1.1 bootstrap style of button in flex

---
 ui/src/Components/ManagedSilence/SilenceDetails.tsx           | 2 +-
 .../ManagedSilence/__snapshots__/index.test.tsx.snap          | 2 +-
 ui/src/Components/SilenceModal/Browser/index.tsx              | 2 +-
 ui/src/Styles/App.scss                                        | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.tsx b/ui/src/Components/ManagedSilence/SilenceDetails.tsx
index 51da10264..227c5d620 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.tsx
@@ -168,7 +168,7 @@ const SilenceDetails: FC<{
         <div className="flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ms-0">
           <div className="d-flex flex-fill flex-lg-column flex-row justify-content-around">
             <button
-              className="btn btn-primary btn-sm mb-lg-2 mb-0"
+              className="btn btn-primary btn-sm mb-lg-2 mb-0 button-in-flex"
               disabled={isReadOnly}
               onClick={() => {
                 !isReadOnly && onEditSilence();
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
index 4552595fd..466de69a4 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
@@ -295,7 +295,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
         </div>
         <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ms-0\\">
           <div class=\\"d-flex flex-fill flex-lg-column flex-row justify-content-around\\">
-            <button class=\\"btn btn-primary btn-sm mb-lg-2 mb-0\\">
+            <button class=\\"btn btn-primary btn-sm mb-lg-2 mb-0 button-in-flex\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
diff --git a/ui/src/Components/SilenceModal/Browser/index.tsx b/ui/src/Components/SilenceModal/Browser/index.tsx
index 97ac71ea5..66d2cd2dd 100644
--- a/ui/src/Components/SilenceModal/Browser/index.tsx
+++ b/ui/src/Components/SilenceModal/Browser/index.tsx
@@ -120,7 +120,7 @@ const Browser: FC<{
         />
         <button
           type="button"
-          className="btn btn-secondary flex-grow-0 flex-shrink-0"
+          className="btn btn-secondary flex-grow-0 flex-shrink-0 button-in-flex"
           onClick={() => setSortReverse(!sortReverse)}
         >
           <FontAwesomeIcon
diff --git a/ui/src/Styles/App.scss b/ui/src/Styles/App.scss
index 0d0c98127..54b71130f 100644
--- a/ui/src/Styles/App.scss
+++ b/ui/src/Styles/App.scss
@@ -18,3 +18,7 @@
 .components-duration h2 {
   font-size: 2.5rem;
 }
+
+button.btn.button-in-flex {
+  align-self: auto;
+}