From 4e8f29712251ad9511a3d139b3f1e7a902bb97eb Mon Sep 17 00:00:00 2001
From: "metabase-bot[bot]"
<109303359+metabase-bot[bot]@users.noreply.github.com>
Date: Wed, 20 Mar 2024 21:12:27 +0000
Subject: [PATCH] Accommodate wide icons in nav and admin nav (#40386) (#40402)
Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com>
---
.../whitelabel/components/LogoIcon.jsx | 7 ++++++-
.../nav/components/AdminNavbar/AdminNavbar.styled.tsx | 2 ++
.../nav/components/AppBar/AppBarLogo.styled.tsx | 10 +++-------
3 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/enterprise/frontend/src/metabase-enterprise/whitelabel/components/LogoIcon.jsx b/enterprise/frontend/src/metabase-enterprise/whitelabel/components/LogoIcon.jsx
index dbf81e42083..c8fbc897b36 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 7f01ff9e491..a2f145d4616 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 53d092c5d3e..66dbd0c355b 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;
- `}
`;
--
GitLab