From b56ff8d69e7bc435358a4ed3c0bff6a25ee80456 Mon Sep 17 00:00:00 2001
From: Tai Wilkin-Corraggio <twilkin@azavea.com>
Date: Mon, 16 Aug 2021 10:44:28 -0400
Subject: [PATCH] Fix mobile header

The updated logo was pushing some buttons out of alignment on mobile.
A media query now adjusts the logo size as needed.
---
 CHANGELOG.md                      | 2 ++
 src/app/src/App.css               | 8 ++++++++
 src/app/src/components/Navbar.jsx | 6 +-----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a936c2360..bf74677f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 
+- Fix mobile header [#1454](https://github.com/open-apparel-registry/open-apparel-registry/pull/1454)
+
 ### Security
 
 ## [45] 2021-07-21
diff --git a/src/app/src/App.css b/src/app/src/App.css
index 30e562150..634fa2c64 100644
--- a/src/app/src/App.css
+++ b/src/app/src/App.css
@@ -635,10 +635,18 @@ hr {
   justify-content: middle;
 }
 
+.logo {
+    height: 35px;
+}
+
 @media (min-width: 600px) {
   .mobileMenuToggle {
     display: none;
   }
+
+  .logo {
+      height: 60px;
+  }
 }
 
 @media (max-width: 599px) {
diff --git a/src/app/src/components/Navbar.jsx b/src/app/src/components/Navbar.jsx
index 0404a6c4f..07d3edd60 100644
--- a/src/app/src/components/Navbar.jsx
+++ b/src/app/src/components/Navbar.jsx
@@ -218,11 +218,7 @@ function Navbar({ openGDPR }) {
                             href="/"
                             style={{ display: 'inline-flex' }}
                         >
-                            <img
-                                src={logo}
-                                style={{ height: '60px' }}
-                                alt="logo"
-                            />
+                            <img src={logo} className="logo" alt="logo" />
                         </Link>
                     </div>
                     {mainNavigation}