[Bug]: While applying Reflow “RAW” button getting overlapped in “Controls tab item” page.

[msftedad]

Describe the bug

While applying Reflow “RAW” button getting overlapped in “Controls tab item” page.

Actual Result:
While applying Reflow “RAW” button getting overlapped in “Controls tab item” page.

Expected Result:
While applying Reflow “RAW” button should not overlap in “Controls tab item” page.

To Reproduce

1. Open URL: Common Navigation - Scrolling Panel ⋅ Storybook (windows.net)
2. Navigate to “App bar” button at left side of the pane invoke it and navigate to “Inline” link invoke it.
3. Now navigate to “Controls” tab item invoke it and apply Reflow and observe the issue at “RAW” button.

Attachments:

In Normal Mode:

After Applying Reflow:

System

OS: Windows 11
OS version: 22H2 (OS Build 22621.2134)
Edge Version: 116.0.1938.69 (Official build) (64-bit)

Additional context

Pre-requisites:

Change the display resolution to 320* 256 and scale to 100%.

[Tjs002]

@shilman can i work on this can u let me know how to set up codebase as i am new to opensource?

[shilman]

@Tjs002 Thank you for helping make Storybook better! 🙏 Please check out how to contribute in our docs and feel free to ask questions in #contributing in our Discord.

[Tjs002]

@msftedad can help to reproduce this issue im not able to reproduce it in localhost

[msftedad]

Hi @Tjs002 , Please find the repro steps

1. Open the URL Common Navigation - Scrolling Panel ⋅ Storybook (windows.net)
2. Invoke App bar present in the left navigation
3. Navigate to inline and then navigate to controls option present in the main region
4. Open the DOM and change the dimensions to 320*256
5. Observe the issue.

Hope this will help you. If you need more info please feel free to ask. Thanks

[Tjs002]

This is what i see after starting the server locally..

[msftedad]

That is not the right URL.

This is the right one-Open the URL Common Navigation - Scrolling Panel ⋅ Storybook (windows.net)

You will be redirected to the above page after invoking the link.

[Tjs002]

@msftedad can u drop ur mail or discord id so that i can connect u there?
im not able to open this url in localhost. Did u install any library or module?

[msftedad]

@Tjs002 you can connect with me on [email protected] on this mail. Thanks

[msftedad]

Hi Tejas Gandhi, How can we connect on this issue. Can you block the calendar for meeting and send me the link so that we can connect and discuss this issue directly. Thanks Mounika. From: Tejas Gandhi ***@***.***> Sent: Friday, September 22, 2023 1:27 PM To: storybookjs/storybook ***@***.***> Cc: 3P Accessibility Dependency Tracking ***@***.***>; Mention ***@***.***> Subject: Re: [storybookjs/storybook] [Bug]: While applying Reflow “RAW” button getting overlapped in “Controls tab item” page. (Issue #24149) @msftedad<https://github.com/msftedad> can u drop ur mail or discord id so that i can connect u there? — Reply to this email directly, view it on GitHub<#24149 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AWLEWX2LZ5MR5GUV6A26XT3X3VADNANCNFSM6AAAAAA4UMA3BA>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[shivam907]

Hi @msftedad I can see the issue is still not fixed can you assign it to me

[shivam907]

@msftedad I am not able to find this page when I set up the project locally
on
http://localhost:6006/index.html?path=/story/common-navigation--scrolling-panel&globals=backgrounds.grid:!false;backgrounds.value:transparent

but when I open it on https://vivacommonstorybooktest.blob.core.windows.net/$web/index.html?path=/story/common-navigation--scrolling-panel&globals=backgrounds.grid:!false;backgrounds.value:transparent

I am able to access it can you tell me how can I open this link locally