From 7184908d737e77f499cc25a4c4bb1b75f8e86148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 29 Jun 2021 20:17:35 +0100
Subject: [PATCH] fix(ui): fix help tab css

---
 ui/src/Components/MainModal/Help.tsx          |  4 +--
 .../__snapshots__/Help.test.tsx.snap          | 26 +++++++++----------
 ui/src/Styles/RebootlessBootstrap.scss        |  2 +-
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/ui/src/Components/MainModal/Help.tsx b/ui/src/Components/MainModal/Help.tsx
index ef89734d9..51531ec80 100644
--- a/ui/src/Components/MainModal/Help.tsx
+++ b/ui/src/Components/MainModal/Help.tsx
@@ -34,7 +34,7 @@ const QueryHelp: FC<{
 }> = ({ title, operators, warning, children }) => (
   <>
     <dt>{title}</dt>
-    <dd className="mb-5">
+    <dd>
       <div>
         Supported operators:{" "}
         {operators.map((op) => (
@@ -44,7 +44,7 @@ const QueryHelp: FC<{
         ))}
       </div>
       {warning ? (
-        <div className="my-1 alert alert-secondary">
+        <div className="my-1 alert alert-secondary p-2">
           <FontAwesomeIcon icon={faInfoCircle} className="me-1" />
           {warning}
         </div>
diff --git a/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
index a36142259..352841fd7 100644
--- a/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
+++ b/ui/src/Components/MainModal/__snapshots__/Help.test.tsx.snap
@@ -158,7 +158,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on any label
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -316,7 +316,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the Alertmanager instance name they were collected from
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -383,7 +383,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the Alertmanager cluster name
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -450,7 +450,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the receiver name
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -509,7 +509,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the state
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -568,7 +568,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the Alertmanager alert fingerprint
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -615,7 +615,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match suppressed alerts based on the silence ID
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -662,7 +662,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the author of silence
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -729,7 +729,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on the ticket IDs detected in the silence comment
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
@@ -745,7 +745,7 @@ exports[`<Help /> matches snapshot 1`] = `
                 !~
               </kbd>
             </div>
-            <div class=\\"my-1 alert alert-secondary\\">
+            <div class=\\"my-1 alert alert-secondary p-2\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
@@ -813,14 +813,14 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Limit number of displayed alerts
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
                 =
               </kbd>
             </div>
-            <div class=\\"my-1 alert alert-secondary\\">
+            <div class=\\"my-1 alert alert-secondary p-2\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
@@ -856,7 +856,7 @@ exports[`<Help /> matches snapshot 1`] = `
           <dt>
             Match alerts based on creation timestamp
           </dt>
-          <dd class=\\"mb-5\\">
+          <dd>
             <div>
               Supported operators:
               <kbd class=\\"me-1\\">
diff --git a/ui/src/Styles/RebootlessBootstrap.scss b/ui/src/Styles/RebootlessBootstrap.scss
index 6c2964eb1..14207617b 100644
--- a/ui/src/Styles/RebootlessBootstrap.scss
+++ b/ui/src/Styles/RebootlessBootstrap.scss
@@ -21,7 +21,7 @@
 //@import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
 @import "bootstrap/scss/badge";
-//@import "bootstrap/scss/alert";
+@import "bootstrap/scss/alert";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";