Fix: Adjust max-width of brand image to fix resize

[hakshu25]

Closes #28192

What I did

When brand image re-rendering occurs due to addons such as storybook-dark-mode, the style priority changes and max-width changes, resulting in unintentional resizing.
Therefore, the max-width has been modified to be aligned with the parent element.

brand-image-resize_before.mov

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. cd sandbox/react-vite-default-ts && yarn add -D storybook-dark-mode
3. Change in sandbox/react-vite-default-ts/.storybook/main.ts

const config: StorybookConfig = {
...
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
+  'storybook-dark-mode',
  ],
};

4. Add sandbox/react-vite-default-ts/.storybook/manager.ts

import { addons } from '@storybook/manager-api';
import { create } from '@storybook/theming/create';

const theme = create({
  base: 'light',
  brandTitle: 'My custom Storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
  brandTarget: '_self',
});

addons.setConfig({
  theme,
});

5. Open Storybook in your browser

brand-image-resize_after.mov

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.3 MB	76.3 MB	0 B	0.32	0%
initSize	167 MB	171 MB	3.63 MB	1.82	2.1%
diffSize	91.1 MB	94.8 MB	3.63 MB	1.83	3.8%
buildSize	7.42 MB	7.42 MB	-39 B	-7.6	0%
buildSbAddonsSize	1.61 MB	1.61 MB	11 B	0.9	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.29 MB	2.29 MB	-38 B	-0.96	0%
buildSbPreviewSize	351 kB	351 kB	8 B	0.9	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.45 MB	4.45 MB	-19 B	-1.02	0%
buildPreviewSize	2.97 MB	2.97 MB	-20 B	-5.57	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	6.4s	7.3s	969ms	-1.66	🔺13.1%
generateTime	20.5s	28.3s	7.7s	1.72	🔺27.4%
initTime	18.7s	26.2s	7.4s	3.2	🔺28.5%
buildTime	12.5s	17.9s	5.3s	5.78	🔺29.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	8.1s	8.3s	228ms	-0.1	2.7%
devManagerResponsive	5s	5.5s	487ms	0.78	8.8%
devManagerHeaderVisible	886ms	822ms	-64ms	0.05	-7.8%
devManagerIndexVisible	910ms	855ms	-55ms	0.1	-6.4%
devStoryVisibleUncached	1.6s	1.1s	-476ms	-1	-41.8%
devStoryVisible	926ms	884ms	-42ms	0.2	-4.8%
devAutodocsVisible	759ms	723ms	-36ms	-0.28	-5%
devMDXVisible	730ms	716ms	-14ms	-0.25	-2%
buildManagerHeaderVisible	737ms	837ms	100ms	0.67	11.9%
buildManagerIndexVisible	746ms	844ms	98ms	0.69	11.6%
buildStoryVisible	786ms	896ms	110ms	0.78	12.3%
buildAutodocsVisible	694ms	785ms	91ms	0.89	11.6%
buildMDXVisible	647ms	749ms	102ms	0.81	13.6%

Greptile Summary

The primary change addresses the resizing issue of the brand image in the sidebar by aligning its max-width with the parent element.

• Modified code/core/src/manager/components/sidebar/Brand.tsx to set Img component's maxWidth to '100%' instead of '150px'.
• Ensures consistent brand image resizing across different themes and sidebar widths.

[greptile-apps]

LGTM

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 05916af. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[yannbf]

Thanks for your contribution @hakshu25! @cdedreuille would you mind taking a look? Thanks!

[hakshu25]

@cdedreuille would you mind taking a look?

[hakshu25]

Fixed in #29129, so this PR is closed.