UI: Brand image css class conflict causes image to resize on hot reloads

[ShreySinha02]

…o resize on hot reloads

Closes #29122

What I did

Brand image css class conflict causes image to resize on hot reloads when we toggle between dark and light mode as described in #29122
updated the css to maxWidth: '150px !important'

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!

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	77.5 MB	77.5 MB	32 B	1.34	0%
initSize	162 MB	162 MB	43 B	0.65	0%
diffSize	85 MB	85 MB	11 B	-0.16	0%
buildSize	7.57 MB	7.57 MB	11 B	0.48	0%
buildSbAddonsSize	1.66 MB	1.66 MB	0 B	-	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.34 MB	2.34 MB	11 B	3.31	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.55 MB	4.55 MB	11 B	3.31	0%
buildPreviewSize	3.02 MB	3.02 MB	0 B	-2.86	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	5.7s	13.8s	8.1s	-0.02	58.8%
generateTime	20.4s	22.5s	2s	0.19	9.3%
initTime	14.7s	19s	4.2s	0.74	22.4%
buildTime	11.3s	10.9s	-419ms	-0.32	-3.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.1s	7.5s	1.3s	0.37	18.4%
devManagerResponsive	4s	4.8s	852ms	0.37	17.5%
devManagerHeaderVisible	711ms	720ms	9ms	-0.91	1.3%
devManagerIndexVisible	752ms	754ms	2ms	-0.89	0.3%
devStoryVisibleUncached	1.1s	1.5s	404ms	0.2	26.7%
devStoryVisible	754ms	753ms	-1ms	-0.91	-0.1%
devAutodocsVisible	582ms	798ms	216ms	0.26	27.1%
devMDXVisible	606ms	703ms	97ms	-0.3	13.8%
buildManagerHeaderVisible	625ms	671ms	46ms	-1.18	6.9%
buildManagerIndexVisible	687ms	678ms	-9ms	-1.33	-1.3%
buildStoryVisible	688ms	748ms	60ms	-0.94	8%
buildAutodocsVisible	650ms	656ms	6ms	-0.75	0.9%
buildMDXVisible	611ms	628ms	17ms	-0.79	2.7%

Greptile Summary

This PR addresses a CSS conflict causing brand image resizing on hot reloads by modifying the maxWidth property in the Brand.tsx component.

• Added !important to maxWidth: '150px' in code/core/src/manager/components/sidebar/Brand.tsx for the Img styled component
• This change ensures the brand image maintains its size during theme toggles and hot reloads
• While effective, using !important is a quick fix and may lead to future CSS specificity issues
• A more robust, long-term solution might involve restructuring the CSS to avoid conflicts
• The PR directly addresses the issue reported in [Bug]: Brand image css class conflict causes image to resize on hot reloads #29122, improving user experience during theme changes

[greptile-apps]

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

[greptile-apps]

style: Using '!important' fixes the immediate issue but may cause future maintainability problems. Consider restructuring CSS to avoid specificity conflicts.

[ShreySinha02]

issue_soln.webm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 9f81ec0. 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.

[MichaelArestad]

Thanks for fixing this! I have some minor concerns about what we should do here.

I did a bit of digging and it seems this commit is likely the source of the problem here. I am not entirely sure what that line is intended to do, but the selector is far too broad to keep around as is. I think we actually need to either remove the generic selector or increase specificity to avoid this conflict. Changing that line would remove the need for !important. @ndelangen Do you remember specifically what that commit was intended to do?

It's also worth noting that this commit just a few months earlier looks like it fixes the same thing.