timc1/kbar

Bug: Always Adding Scrollbar Margin

EmirBoyaci opened this issue · 8 comments

Hello,

I just tried KBar and found that it is always adding scrollbar margin even if scrollbar is not visible. I think we should add scrollbar's margin if scrollbar is actually visible. It is because, if scrollbar is not visible and we add margin, content shifting to left.

timc1 commented

Can you add a screen cap or codesandbox to reproduce this issue?

Can you add a screen cap or codesandbox to reproduce this issue?

Sure, I tried in https://kbar.vercel.app/ website by removing HTML elements from Developer Tools. Here you can see the screen recording:

2023-02-20_22-23-45.mp4
timc1 commented

Can you use disableScrollbarManagement ? https://github.com/timc1/kbar/blob/main/src/types.ts#L55

Can you use disableScrollbarManagement ? https://github.com/timc1/kbar/blob/main/src/types.ts#L55

If I do and if we have overflowed content (iow scrollbar is visible), then layout shifts.

I'm switching to my laptop, i'll try again this option. If I am not mistaken, I tried this option and it shifted layout .

@timc1 yes, I remember correct. If I pass disableScrollbarManagement: true to KBarProvider as a option prop, then page content shifts where content overflows (iow scrollbar visible). It is like vice-versa, if I set disableScrollbarManagement true and scrollbar is visible, then layout shifts. Otherwise, page's layout's are shifting where pages do not have overflow content (without scrollbar).

Hi @timc1 do you also need reproducer for the disableScrollbarManagement: true behaviour? I am currently thinking why someone did not ever faced with that issue..

stale commented

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I'm also facing the same issue!