storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.95k stars 9.22k forks source link

[Bug]: `BrandImage` resizes itself in dark theme when resizing sidebar #28192

Open mayabuserde opened 3 months ago

mayabuserde commented 3 months ago

Describe the bug

When switching to the Storybook dark theme, the BrandImage resizes itself when changing the width of the sidebar. The same problem seems to have been addressed for the light theme in this issue: https://github.com/storybookjs/storybook/issues/24702.

Depending on the width of the sidebar, the logos might be different sizes when switching between themes.

I think the dark theme should behave like the light theme.

https://github.com/storybookjs/storybook/assets/69268452/b32aaac0-f50c-4ea8-a367-547a5a280530

Reproduction link

N/A

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
    pnpm: 8.3.1 - ~/.nvm/versions/node/v18.7.0/bin/pnpm <----- active
  Browsers:
    Chrome: 125.0.6422.142
    Edge: 125.0.2535.92
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: 8.0.9 => 8.0.9 
    @storybook/addon-actions: 8.0.9 => 8.0.9 
    @storybook/addon-essentials: 8.0.9 => 8.0.9 
    @storybook/blocks: 8.0.9 => 8.0.9 
    @storybook/theming: 8.0.9 => 8.0.9 
    @storybook/web-components: 8.0.9 => 8.0.9 
    @storybook/web-components-vite: 8.0.9 => 8.0.9 
    chromatic: 5.8.3 => 5.8.3 
    storybook: 8.0.9 => 8.0.9 
    storybook-dark-mode: 4.0.1 => 4.0.1

Additional context

No response

mugunthankrishnan commented 1 month ago

Hello @vanessayuenn and @mayabuserde, I'm new to open source contribution and would like to get started. Can you please give me any tips and processes that I need to follow to contribute to this issue? Thanks.

logee48 commented 1 month ago

Hey, I can fix it, Assign it to me. Thank you

ArchitGajjar commented 1 month ago

Hi @mayabuserde - thank you for sharing video and details. I would like to contribute into this project, can you please assign this to me ? Thank you so much! :)

mayabuserde commented 1 month ago

Hi @vanessayuenn, can you help with assigning the issue to someone or provide some guidance on how to start working on it? Thank you!

ShreySinha02 commented 1 week ago

@mayabuserde hii is this issue fixed because i am tried reproducing it but it is working normally for me Screencast from 04-09-24 08:13:56 PM IST.webm

mhmdjaw commented 5 days ago

@ShreySinha02 Nope still happening.. it only affects the width of the logo. In your case the width is fixed that's why it doesn't resize.