diff --git a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/LogoIcon.jsx b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/LogoIcon.jsx
index dbf81e42083a8be1fc456bf7bb95af10fad1ac9e..c8fbc897b36229275f740639f14ffafb9920e0a1 100644
--- a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/LogoIcon.jsx
+++ b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/LogoIcon.jsx
@@ -112,10 +112,15 @@ class LogoIcon extends Component {
     } else {
       element.removeAttribute("height");
     }
+    element.style.maxWidth = "100%";
+    element.style.maxHeight = "32px";
+    element.style.minHeight = "100%";
+    element.style.height = "auto";
   }
 
   render() {
-    const { dark, style, className } = this.props;
+    const { dark, style = {}, className } = this.props;
+    style.height ||= "32px";
     return (
       <span
         ref={c => (this._container = c)}
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
index 7f01ff9e491719b5bab730322c4509fda8daf287..a2f145d46164988098e0aa9c5622fef4eb81dd95 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx
@@ -77,6 +77,8 @@ export const AdminExitLink = styled(Link)`
 export const AdminLogoContainer = styled.div`
   display: flex;
   min-width: 32px;
+  max-width: 20rem;
+  overflow: hidden;
   height: 32px;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/metabase/nav/components/AppBar/AppBarLogo.styled.tsx b/frontend/src/metabase/nav/components/AppBar/AppBarLogo.styled.tsx
index 53d092c5d3eded03c3911ec59db6a840d91dfb4c..66dbd0c355b58896deb93dd7273686170b9dcde4 100644
--- a/frontend/src/metabase/nav/components/AppBar/AppBarLogo.styled.tsx
+++ b/frontend/src/metabase/nav/components/AppBar/AppBarLogo.styled.tsx
@@ -1,4 +1,3 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import Link from "metabase/core/components/Link";
@@ -9,12 +8,9 @@ export const LogoLink = styled(Link)<{ isSmallAppBar: boolean }>`
   align-items: center;
   justify-content: center;
   border-radius: 0.375rem;
-  width: 2.25rem;
   height: 3.25rem;
+  min-width: 2.25rem;
+  max-width: 14rem;
+  line-height: 0;
   opacity: 1;
-  ${props =>
-    !props.isSmallAppBar &&
-    css`
-      margin-right: 2rem;
-    `}
 `;