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

@@ -0,0 +1 @@
+- Fixed an issue where custom org logos might be displayed off-center

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;

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>

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;
+}