use flexbox instead of magic height percentage

ilios · Aug 7, 2024 · 42cbd5d · 42cbd5d
1 parent 02bbba2
commit 42cbd5d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
@@ -37,11 +37,11 @@
       grid-area: user;
     }
     .user-guide-link {
+      display: flex;
       grid-area: guide;
-      height: 72%;
 
       @include m.for-phone-only {
-        height: 100%;
+        vertical-align: -0.25em;
       }
     }
 

diff --git a/packages/frontend/app/styles/components/user-guide-link.scss b/packages/frontend/app/styles/components/user-guide-link.scss
@@ -17,7 +17,7 @@ $header-menu-background-color: color.adjust(c.$slightWhite, $lightness: -3%);
     @include cm.font-size("small");
     font-weight: normal;
     margin-left: 0.8rem;
-    padding: 0.2em;
+    padding: 0.25em;
 
     &:hover,
     &:focus {
@@ -27,7 +27,6 @@ $header-menu-background-color: color.adjust(c.$slightWhite, $lightness: -3%);
     @include cm.for-tablet-and-up {
       display: inline;
       margin-left: 0.5rem;
-      padding: 0.125em;
     }
 
     @include cm.for-phone-only {