feat: make logo container width adaptive based on content type (#7075)

* feat: make logo container width adaptive based on content type

* feat: add a minimum width to the text title
This commit is contained in:
chenyongxin 2025-06-16 17:41:59 +08:00 committed by GitHub
parent 0e669c0bd3
commit f1d9ea0336
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -177,7 +177,6 @@ const layoutContentClass = css`
`;
const className1 = css`
width: 168px;
height: var(--nb-header-height);
margin-right: 4px;
display: inline-flex;
@ -186,6 +185,15 @@ const className1 = css`
padding: 0;
align-items: center;
`;
const className1WithFixedWidth = css`
${className1}
width: 168px;
`;
const className1WithAutoWidth = css`
${className1}
width: auto;
min-width: 168px;
`;
const className2 = css`
object-fit: contain;
width: 100%;
@ -263,7 +271,8 @@ const NocoBaseLogo = () => {
const { token } = useToken();
const fontSizeStyle = useMemo(() => ({ fontSize: token.fontSizeHeading3 }), [token.fontSizeHeading3]);
const logo = result?.data?.data?.logo?.url ? (
const hasLogo = result?.data?.data?.logo?.url;
const logo = hasLogo ? (
<img className={className2} src={result?.data?.data?.logo?.url} />
) : (
<span style={fontSizeStyle} className={className3}>
@ -271,7 +280,9 @@ const NocoBaseLogo = () => {
</span>
);
return <div className={className1}>{result?.loading ? null : logo}</div>;
return (
<div className={hasLogo ? className1WithFixedWidth : className1WithAutoWidth}>{result?.loading ? null : logo}</div>
);
};
/**