From 3aad263e6da817e8539de3bf4deb560a0b3ac52f Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Fri, 9 Dec 2016 16:31:54 -0600
Subject: [PATCH] Fix Firefox flexbox on all hosts page (#607)

---
 .../PanelGroupItem/PanelGroupItem.jsx              | 14 ++++++++------
 .../HostSidePanel/PanelGroupItem/_styles.scss      |  7 +++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx
index 114375962a..d7a1dee8f2 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx
@@ -39,12 +39,14 @@ class PanelGroupItem extends Component {
 
     return (
       <button className={wrapperClassName} onClick={onLabelClick}>
-        <Icon name={iconClassForLabel(item)} className={`${baseClass}__icon`} />
-        <span className={`${baseClass}__name`}>
-          {displayText}
-          {description && <span className={`${baseClass}__description`}>{description}</span>}
-        </span>
-        <span className={`${baseClass}__count`}>{count}</span>
+        <div className={`${baseClass}__flexy`}>
+          <Icon name={iconClassForLabel(item)} className={`${baseClass}__icon`} />
+          <span className={`${baseClass}__name`}>
+            {displayText}
+            {description && <span className={`${baseClass}__description`}>{description}</span>}
+          </span>
+          <span className={`${baseClass}__count`}>{count}</span>
+        </div>
       </button>
     );
   }
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
index e0b44c5b05..69e1dcc5be 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
@@ -24,8 +24,6 @@ $base-class: 'panel-group-item';
 
 .#{$base-class} {
   @include transition(color 75ms ease-in-out, background 75ms ease-in-out);
-  @include display(flex);
-  @include align-items(center);
   width: 100%;
   font-size: 16px;
   line-height: 2.25;
@@ -36,6 +34,11 @@ $base-class: 'panel-group-item';
   padding: 0 $pad-large;
   border-radius: 4px;
 
+  &__flexy {
+    @include display(flex);
+    @include align-items(center);
+  }
+
   &__icon {
     @include transition(color 75ms ease-in-out);
     margin-right: 23px;