Fix IE11 icon alignment on header and system overview

Made height and width changes to icons on app header
and system overview to properly align icons in IE11.
Removes additional space in system overview quick
links.

Tested in Chrome, IE11, Safari, Edge.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I7ae24df3fe73ea3502565ed3ee2ccabb2506e098

2 files changed, 10 insertions, 7 deletions

diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index e6f49a3..0cdd588 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -17,7 +17,9 @@
     text-decoration: none;
   }
 
-  p {
+  p,
+  dl,
+  dd {
     margin-bottom: 0;
   }
 
@@ -31,6 +33,10 @@
   border-bottom: 1px solid $border-color-01;
   position: relative;
 
+  .icon {
+    height: 1.5rem;
+  }
+
   &.no-icon {
     overflow: auto;
 
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 5a7a9d1..c034c82 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -146,7 +146,7 @@ $logoMaxWidth: 125px;
     opacity: 1;
 
     .icon svg {
-      width: 1rem;
+      height: 1rem;
     }
 
     .status-icon {
@@ -173,10 +173,8 @@ $logoMaxWidth: 125px;
 
       .icon {
         @include fastTransition-all;
-        margin: 0.2em 0 0 0;
-
         svg {
-          width: 2.6rem;
+          width: 1.25rem;
           height: auto;
         }
       }
@@ -214,8 +212,7 @@ $logoMaxWidth: 125px;
       margin-right: auto;
 
       svg {
-        width: 1.6rem;
-        height: auto;
+        height: 1.5rem;
         fill: $primary-accent;
       }
     }