From 998e81db6da7aa1cf5f31ffcaa07868ba62036be Mon Sep 17 00:00:00 2001
From: Jack <me@jackben.net>
Date: Thu, 8 Feb 2018 16:07:47 +0000
Subject: [PATCH] Remove fixed height constraint from host details component.
 (#1706)

If some elements content extends beyond the assumed height it will overflow outside of the details block.

These changes remove any height limit, allowing flexbox to even the details height per row. Removing justify centre keeps the header in place at the top for details that are smaller than the max height in other blocks on that row.

Used flex 1 to expand the hosts details list elements to the remaining space in the details component. Can make for some odd spacing but seems nicer than bunching elements at the top of the component.
---
 frontend/components/hosts/HostDetails/_styles.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/components/hosts/HostDetails/_styles.scss b/frontend/components/hosts/HostDetails/_styles.scss
index b127bf8d97..5850341067 100644
--- a/frontend/components/hosts/HostDetails/_styles.scss
+++ b/frontend/components/hosts/HostDetails/_styles.scss
@@ -3,7 +3,6 @@
   @include flex-direction(column);
   @include flex-grow(1);
   @include flex-basis(250px);
-  justify-content: center;
   background-color: $white;
   border-radius: 3px;
   box-shadow: 0 12px 17px 0 rgba(47, 47, 91, 0.07), 0 3px 8px 0 rgba(0, 0, 0, 0.08), 0 -2px 0 0 rgba(32, 36, 50, 0.04);
@@ -12,7 +11,6 @@
   margin: 30px 7px 0;
   position: relative;
   text-align: center;
-  height: 280px;
   max-width: 300px;
 
   &--online {
@@ -80,6 +78,7 @@
     @include flex-wrap(wrap);
     @include justify-content(space-around);
     @include align-items(center);
+    flex: 1;
     list-style: none;
     margin: 0 auto;
     padding: 8px 0;