Storybook: Custom theme brand image not being displayed in the Sidebar

[dgonzalezr]

Describe the bug
The custom brand image is not displayed in the Sidebar component. Basically, the width: 100% CSS rule has been removed from the LogoLink styling:

https://github.com/storybookjs/storybook/commit/b109fef85275c9c18115caaa96ce0de30de67d61#diff-7f825227d10a8f07815e42eb81a5c369be2ddc4982a53b4676a369e6e4460aa0L21

To Reproduce
Steps to reproduce the behavior:

1. Set a custom theme and add a custom brandImage property.
2. Start storybook.
3. Go to the browser and check the top sidebar.

Expected behavior
The brand logo image to be displayed in the sidebar component.

Screenshots

[jasongilmour]

Are there any workarounds for this? I've tried adding <style type="text/css">.sidebar-header a > img { min-width: 122px; }</style> to manager-head.html but the style tag isn't being included when Storybook is built.

Also tried importing a stylesheet in manager.js but can't get anything to work here.

[ghengeveld]

Don't set width: 100% on the anchor, it will make it wider than the actual image. This is why this property got removed in the first place.

I was able to reproduce this only when using an svg image which has no width or height property. I'll look into a fix to address this without forcing 100% width.

Meanwhile, the workaround is to make sure your SVG image has a width and height property.

[kylegach]

I also submitted #13355 in an attempt to fix this issue.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.10 containing PR #13355 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.3 containing PR #13355 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease