From cd29ae431e1d32845abe2c16f4acfedbf0de1ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 14 Oct 2018 10:44:57 +0100
Subject: [PATCH] refactor(ui): use flex instead of float in alert group header

---
 .../AlertGrid/AlertGroup/GroupHeader/index.js | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
index 7dfe800b5..479942187 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -29,11 +29,20 @@ const GroupHeader = observer(
       const { collapseStore, group, silenceFormStore } = this.props;
 
       return (
-        <h5 className="card-title mb-0 clearfix">
-          <span className="float-left">
+        <h5 className="card-title mb-0 d-flex flex-row">
+          <span className="flex-shrink-0 flex-grow-0">
             <GroupMenu group={group} silenceFormStore={silenceFormStore} />
           </span>
-          <span className="float-right">
+          <span className="flex-shrink-1 flex-grow-1" style={{ minWidth: 0 }}>
+            {Object.keys(group.labels).map(name => (
+              <FilteringLabel
+                key={name}
+                name={name}
+                value={group.labels[name]}
+              />
+            ))}
+          </span>
+          <span className="flex-shrink-0 flex-grow-0 ml-auto pl-1">
             <FilteringCounterBadge
               name="@state"
               value="unprocessed"
@@ -50,7 +59,7 @@ const GroupHeader = observer(
               counter={group.stateCount.active}
             />
             <span
-              className="text-muted cursor-pointer badge text-nowrap text-truncate pr-0"
+              className="text-muted cursor-pointer badge text-nowrap text-truncate px-0"
               onClick={collapseStore.toggle}
             >
               <TooltipWrapper title="Toggle group details">
@@ -60,15 +69,6 @@ const GroupHeader = observer(
               </TooltipWrapper>
             </span>
           </span>
-          <span>
-            {Object.keys(group.labels).map(name => (
-              <FilteringLabel
-                key={name}
-                name={name}
-                value={group.labels[name]}
-              />
-            ))}
-          </span>
         </h5>
       );
     }