From 42cbd5deaf82a0ab7a5072c6816c8db4d54b44f9 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Wed, 7 Aug 2024 15:27:52 -0700
Subject: [PATCH] use flexbox instead of magic height percentage

---
 packages/frontend/app/styles/components/ilios-header.scss    | 4 ++--
 packages/frontend/app/styles/components/user-guide-link.scss | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/app/styles/components/ilios-header.scss b/packages/frontend/app/styles/components/ilios-header.scss
index 24ae13d2f7..257831de65 100644
--- 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
index bf73ab1ce7..2c83f40569 100644
--- 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 {