From 59fb6ca04bfcf4a38858ddf7332fd9092116adbb Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 3 Dec 2020 22:07:42 +0100
Subject: [PATCH] Fix brandImage visibility for unsized SVGs.

---
 lib/ui/src/components/sidebar/Brand.tsx       |  1 +
 .../components/sidebar/Heading.stories.tsx    | 54 +++++++++++++++++++
 lib/ui/src/components/sidebar/Heading.tsx     |  2 +-
 3 files changed, 56 insertions(+), 1 deletion(-)

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 = () => {
     </ThemeProvider>
   );
 };
+
+export const customBrandImageTall = () => {
+  const theme = useTheme() as Theme;
+  return (
+    <ThemeProvider
+      theme={{
+        ...theme,
+        brand: {
+          title: 'My Title',
+          url: 'https://example.com',
+          image: 'https://via.placeholder.com/100x150',
+        },
+      }}
+    >
+      <Heading menu={menuItems} />
+    </ThemeProvider>
+  );
+};
+
+export const customBrandImageUnsizedSVG = () => {
+  const theme = useTheme() as Theme;
+  return (
+    <ThemeProvider
+      theme={{
+        ...theme,
+        brand: {
+          title: 'My Title',
+          url: 'https://example.com',
+          image: 'https://s.cdpn.io/91525/potofgold.svg',
+        },
+      }}
+    >
+      <Heading menu={menuItems} />
+    </ThemeProvider>
+  );
+};
+
+export const noBrand = () => {
+  const theme = useTheme() as Theme;
+  return (
+    <ThemeProvider
+      theme={{
+        ...theme,
+        brand: {
+          title: null,
+          url: null,
+          image: null,
+        },
+      }}
+    >
+      <Heading menu={menuItems} />
+    </ThemeProvider>
+  );
+};
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',