From ce77a3e8792471133c385ac309d09eaccb19d73d Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 5 Apr 2023 11:47:28 -0700
Subject: [PATCH] UI: Fix issue where org logo may be uncentered on DUP
 (#10976)

## Addresses #10790

Adjusted markup of the org logo on the device user page to match those
on the host details page, and have them reference the same styles for
consistency (which fixes this bug)

**Before:**
![Screenshot 2023-04-04 at 3 56 03
PM](https://user-images.githubusercontent.com/61553566/229940383-6ba976f3-b9b6-469c-891a-b295aa728d74.png)
**After:**

![DUP-after-logo-fix](https://user-images.githubusercontent.com/61553566/229940417-d468d995-4bec-48f9-8d1a-999bf37eb206.png)

## Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/10790-uneven-org-logo                       |  1 +
 frontend/components/top_nav/SiteTopNav/_styles.scss |  7 ++++++-
 .../hosts/details/DeviceUserPage/DeviceUserPage.tsx | 12 ++++++++----
 .../pages/hosts/details/DeviceUserPage/_styles.scss | 13 ++++---------
 4 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 changes/10790-uneven-org-logo

diff --git a/changes/10790-uneven-org-logo b/changes/10790-uneven-org-logo
new file mode 100644
index 0000000000..c954469adf
--- /dev/null
+++ b/changes/10790-uneven-org-logo
@@ -0,0 +1 @@
+- Fixed an issue where custom org logos might be displayed off-center
diff --git a/frontend/components/top_nav/SiteTopNav/_styles.scss b/frontend/components/top_nav/SiteTopNav/_styles.scss
index a4ed17ee0c..706a54e8b5 100644
--- a/frontend/components/top_nav/SiteTopNav/_styles.scss
+++ b/frontend/components/top_nav/SiteTopNav/_styles.scss
@@ -3,6 +3,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-left: 2px;
 }
 
 .site-nav-list {
@@ -72,6 +73,10 @@
     text-decoration: none;
   }
 
+  &__logo-wrapper {
+    overflow: hidden;
+  }
+
   &__logo {
     text-align: center;
     display: flex;
@@ -86,7 +91,7 @@
     background-color: $site-nav-on-hover;
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       bottom: 0;
       left: 0;
diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
index 10a5d5332b..e2ba7f345f 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
@@ -441,11 +441,15 @@ const DeviceUserPage = ({
 
   return (
     <div className="app-wrap">
-      <nav className="site-nav">
-        <div className="site-nav-container">
+      <nav className="site-nav-container">
+        <div className="site-nav-content">
           <ul className="site-nav-list">
-            <li className={`site-nav-item--logo`} key={`nav-item`}>
-              <OrgLogoIcon className="logo" src={orgLogoURL || FleetIcon} />
+            <li className="site-nav-item dup-org-logo" key="dup-org-logo">
+              <div className="site-nav-item__logo-wrapper">
+                <div className="site-nav-item__logo">
+                  <OrgLogoIcon className="logo" src={orgLogoURL || FleetIcon} />
+                </div>
+              </div>
             </li>
           </ul>
         </div>
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index aaac438c87..9ec054e09e 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -3,15 +3,6 @@
   .site-nav {
     height: 50px;
   }
-  .site-nav-item--logo {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 64px;
-    max-width: 140px;
-    transform: scale(0.5);
-  }
 }
 .enroll-mdm-modal {
   width: 800px;
@@ -423,3 +414,7 @@
     width: $col-md;
   }
 }
+
+.dup-org-logo {
+  cursor: default;
+}