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,