From a768a4402d658b1b7b555762f1648d548da087e5 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 19 Oct 2021 10:07:55 -0400
Subject: [PATCH] Host Details Page: Spiffier vertically centered header
 (#2566)

---
 frontend/pages/hosts/HostDetailsPage/_styles.scss | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index 0476d2b930..4f0d5f5905 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -150,7 +150,7 @@
 
     .hostname-container {
       display: flex;
-      align-items: flex-end;
+      align-items: center;
     }
 
     .hostname {
@@ -167,13 +167,14 @@
 
     .refetch {
       display: flex;
+      margin-right: $pad-small;
 
       .refetch-btn {
         color: $core-vibrant-blue;
         cursor: default;
         font-size: $x-small;
-        display: inline;
-        margin: 9px 0 0 0; // aligns with spinner
+        height: 38px;
+        margin-right: $pad-small;
 
         &::before {
           display: inline-block;
@@ -181,8 +182,7 @@
           padding: 5px 0 0 0; // centers spin
           content: url(../assets/images/icon-refetch-12x12@2x.png);
           transform: scale(0.5);
-          vertical-align: bottom;
-          height: 20px;
+          height: 28px;
         }
 
         &:hover {
@@ -202,14 +202,13 @@
         color: $core-vibrant-blue;
         cursor: default;
         font-size: $x-small;
-        display: inline;
+        height: 38px;
         opacity: 50%;
         filter: saturate(100%);
 
         &::before {
           display: inline-block;
           position: relative;
-          top: 7px; // aligns with text
           padding: 5px 0 0 0; // centers spin
           display: inline-block;
           content: url(../assets/images/icon-refetch-12x12@2x.png);
@@ -304,7 +303,7 @@
 
   &__action-button-container {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
   }
 
   &__query-button,