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

[stevensacks]

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

<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]

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