From c4f4f6cff816ecb5bf3416bb2ffa28f5419242ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 1 May 2020 18:14:08 +0100
Subject: [PATCH] fix(ui): set min-width on alert menu button

This makes buttons less likely to have a unique width. Alert labels will be better aligned.
---
 .../Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js  | 2 +-
 .../AlertGroup/Alert/__snapshots__/index.test.js.snap        | 4 ++--
 ui/src/Styles/Components/Alert.scss                          | 5 +++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
index e5478689b..9be99f804 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
@@ -121,7 +121,7 @@ const AlertMenu = ({
       <Reference>
         {({ ref }) => (
           <span
-            className={`components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer ${uniqueClass}`}
+            className={`components-label components-label-with-hover components-alert-menu-button px-1 mr-1 badge badge-secondary cursor-pointer ${uniqueClass}`}
             ref={ref}
             onClick={collapse.toggle}
             data-toggle="dropdown"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
index d01292a75..6d52c5efb 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
@@ -60,7 +60,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </div>
     </div>
   </div>
-  <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
+  <span class=\\"components-label components-label-with-hover components-alert-menu-button px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
         data-toggle=\\"dropdown\\"
   >
     <svg aria-hidden=\\"true\\"
@@ -220,7 +220,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       </div>
     </div>
   </div>
-  <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
+  <span class=\\"components-label components-label-with-hover components-alert-menu-button px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
         data-toggle=\\"dropdown\\"
   >
     <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Styles/Components/Alert.scss b/ui/src/Styles/Components/Alert.scss
index 2b71227a4..a9d428dbc 100644
--- a/ui/src/Styles/Components/Alert.scss
+++ b/ui/src/Styles/Components/Alert.scss
@@ -7,3 +7,8 @@
 .components-grid-alertgrid-card {
   background-color: $alert-bg !important;
 }
+
+.components-alert-menu-button {
+  min-width: 7rem;
+  text-align: left;
+}