UI: Fix brandImage visibility for unsized SVGs

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',

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>
+  );
+};

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',