diff --git a/lib/ui/src/components/sidebar/Brand.tsx b/lib/ui/src/components/sidebar/Brand.tsx
index ff45f35a5eb7..4ccfa674fb9e 100644
--- a/lib/ui/src/components/sidebar/Brand.tsx
+++ b/lib/ui/src/components/sidebar/Brand.tsx
@@ -18,6 +18,7 @@ export const Img = styled.img({
export const LogoLink = styled.a(({ theme }) => ({
display: 'inline-block',
+ width: '100%',
height: '100%',
margin: '-3px -4px',
padding: '2px 3px',
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index 66ec310d9f63..a0f2f1243a07 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -131,3 +131,57 @@ export const customBrandImage = () => {
);
};
+
+export const customBrandImageTall = () => {
+ const theme = useTheme() as Theme;
+ return (
+
+
+
+ );
+};
+
+export const customBrandImageUnsizedSVG = () => {
+ const theme = useTheme() as Theme;
+ return (
+
+
+
+ );
+};
+
+export const noBrand = () => {
+ const theme = useTheme() as Theme;
+ return (
+
+
+
+ );
+};
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index b65585af8735..f4b2e8a85293 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -13,7 +13,7 @@ const BrandArea = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2,
fontWeight: theme.typography.weight.bold,
color: theme.color.defaultText,
- marginRight: 40,
+ marginRight: 20,
display: 'flex',
width: '100%',
alignItems: 'center',