brandImage to occupy 100% of the width of <BrandArea/>

[maraisr]

Issue: #6151

If you go:

addParameters({
	options: {
		theme: create({ brandImage: 'https://cdn.something/my-image.svg' })
	}
});

The <Img/> has no width or height, nor does <Brand/> or <BrandArea/>. As they're all three display: block, we can safely tell it to occupy 100% the height, and 100% the width of their parents. Because they do, <Img/> will stretch 100% of the height of <Head/>, and width auto.

Tested this with your own logo: https://storybook.js.org/images/logos/logo-storybook.svg, rather than use <Logo/>.

[ndelangen]

@maraisr thanks for this PR, I want to merge it, but some snapshots need to be updated, would you be able to update them?

[maraisr]

@ndelangen those snapahots have been updated! Thank you!

[codecov]

Codecov Report

Merging #5904 into next will decrease coverage by 3.11%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             next    #5904      +/-   ##
==========================================
- Coverage   38.04%   34.93%   -3.12%     
==========================================
  Files         643      648       +5     
  Lines        9420     9515      +95     
  Branches     1373     1380       +7     
==========================================
- Hits         3584     3324     -260     
- Misses       5268     5574     +306     
- Partials      568      617      +49

Impacted Files	Coverage Δ
lib/ui/src/components/sidebar/SidebarHeading.js	88.46% <ø> (-0.43%)	⬇️
addons/a11y/src/components/Report/index.tsx	0% <0%> (-100%)	⬇️
addons/cssresources/src/constants.ts	0% <0%> (-100%)	⬇️
addons/cssresources/src/css-resource-panel.tsx	0% <0%> (-100%)	⬇️
addons/a11y/src/constants.ts	0% <0%> (-100%)	⬇️
addons/a11y/src/components/A11YPanel.tsx	0% <0%> (-94.45%)	⬇️
addons/a11y/src/components/Tabs.tsx	0% <0%> (-90.48%)	⬇️
addons/a11y/src/components/Report/Info.tsx	0% <0%> (-85.72%)	⬇️
addons/a11y/src/components/Report/Item.tsx	0% <0%> (-85%)	⬇️
lib/ui/src/components/layout/draggers.js	9.09% <0%> (-81.82%)	⬇️
... and 64 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 839f798...62f68a6. Read the comment docs.

[codecov]

Codecov Report

Merging #5904 into next will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next    #5904   +/-   ##
=======================================
  Coverage   38.04%   38.04%           
=======================================
  Files         643      643           
  Lines        9420     9420           
  Branches     1373     1373           
=======================================
  Hits         3584     3584           
  Misses       5268     5268           
  Partials      568      568

Impacted Files	Coverage Δ
lib/ui/src/components/sidebar/SidebarHeading.js	88.88% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 839f798...62f68a6. Read the comment docs.

[maraisr]

That force push there, was just a rebase onto upstream/next.