Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Brand image css class conflict causes image to resize on hot reloads #29122

Open
stevensacks opened this issue Sep 13, 2024 · 1 comment · May be fixed by #29129
Open

[Bug]: Brand image css class conflict causes image to resize on hot reloads #29122

stevensacks opened this issue Sep 13, 2024 · 1 comment · May be fixed by #29129
Labels
bug needs triage

Comments

@stevensacks
Copy link
Contributor

Describe the bug

The brand image has two different classes acting upon it, and sometimes one class takes precedence, and sometimes the other one does.

This is the class directly on the <img> tag:

.css-1rb1jn6 {
    display: block;
    max-width: 150px;
    max-height: 100px;
}

But there's another class on the div that contains the brand image that is also targeting it:

.css-1nwijr1>*>* {
    max-width: 100%;
}

On first load, the first class with max-width: 150px has precedence. When Storybook hot reloads (from a theming addon, for example), the div class takes precedence and the brand image gets noticeably larger because it's no longer constrained by the max-width: 150px.

<img> precedence
img precedence

<div> precedence
div precedence

This happens on my local machine and on Chromatic.

Reproduction link

https://66e3cef65bf40b8afc34806f-jvdpuqyolz.chromatic.com/?path=/story/components-button--default

Reproduction steps

  1. In the top bar, click the "sun" icon to toggle dark and light mode.
  2. See the GAIA logo resize on each click
  3. Open the element inspector to select it and watch the css classes toggle precedence.

System

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v20.17.0/bin/npm <----- active
    pnpm: 8.1.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 17.6
  npmPackages:
    @storybook/addon-essentials: 8.3.0 => 8.3.0 
    @storybook/addon-interactions: 8.3.0 => 8.3.0 
    @storybook/addon-links: 8.3.0 => 8.3.0 
    @storybook/blocks: 8.3.0 => 8.3.0 
    @storybook/manager-api: 8.3.0 => 8.3.0 
    @storybook/preview-api: 8.3.0 => 8.3.0 
    @storybook/react: 8.3.0 => 8.3.0 
    @storybook/react-vite: 8.3.0 => 8.3.0 
    @storybook/test: 8.3.0 => 8.3.0 
    @storybook/theming: 8.3.0 => 8.3.0 
    @storybook/types: 8.3.0 => 8.3.0 
    chromatic: 11.10.2 => 11.10.2 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    storybook: 8.3.0 => 8.3.0 
    storybook-dark-mode: 4.0.2 => 4.0.2 
    storybook-react-i18next: 3.1.7 => 3.1.7

Additional context

No response
ShreySinha02 pushed a commit to ShreySinha02/storybook that referenced this issue Sep 15, 2024
fix issue storybookjs#29122 [Bug]: Brand image css class conflict cau…
0002066 
…ses image to resize on hot reloads
@ShreySinha02 ShreySinha02 linked a pull request Sep 15, 2024 that will close this issue
Open
8 tasks
@ShreySinha02
Copy link

ShreySinha02 commented Sep 15, 2024 •
edited
Loading

hii @stevensacks I made pr fixing this issue #29129 review this 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix issue #29122 [Bug]: Brand image css class conflict causes image t… ShreySinha02/storybook
2 participants
@stevensacks @ShreySinha02